/* =====================================
   PC V2 DESACTIVADO EN CELULAR
===================================== */

@media (max-width:768px){

  .hero-pc-v2,
  .hero-pc-fondo,
  .hero-pc-overlay,
  .hero-pc-contenido,
  .hero-pc-texto,
  .hero-pc-plataformas,
  .hero-pc-beneficios{
    display:none !important;
  }

  .desktop-category-access,
  .cartelera-desktop-nav,
  .categoria-editorial-visual{
    display:none !important;
  }

  /* Recupera el comportamiento móvil original */
  .mobile-featured{
    display:flex !important;
  }

  .catalogo{
    display:block;
  }
}

/* =====================================
   PC V2 - HERO
===================================== */

@media (min-width:769px){

.hero{
    display:none;
}

.hero-pc-v2{

    position:relative;

    min-height:88vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding:70px 70px;

    background:#05070c;

}

.hero-pc-fondo{

    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at top right,#d4af3720,transparent 35%),
    radial-gradient(circle at bottom left,#ffffff08,transparent 30%),
    linear-gradient(135deg,#05070c,#0b1019);

}

.hero-pc-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(5,7,12,.95) 0%,
        rgba(5,7,12,.70) 45%,
        rgba(5,7,12,.35) 100%
    );

}

.hero-pc-contenido{

    position:relative;
    z-index:2;

    width:100%;
    max-width:1400px;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

.hero-pc-texto h1{

    color:white;

    font-size:72px;

    line-height:1.05;

    margin:25px 0;

    font-weight:900;

}

.hero-pc-texto h1 span{

    color:#d4af37;

}

.hero-pc-texto p{

    color:#c7cbd3;

    font-size:20px;

    max-width:600px;

    line-height:1.7;

}

.hero-pc-badge{

    display:inline-flex;

    padding:10px 18px;

    border-radius:999px;

    background:#d4af3720;

    border:1px solid #d4af37;

    color:#f5d66b;

    font-weight:800;

}

.hero-pc-botones{

    display:flex;

    gap:18px;

    margin-top:40px;

}
}
@media (min-width:769px){

  .hero-pc-plataformas{
    position:relative;

    display:grid;
    grid-template-columns:repeat(2, minmax(210px, 1fr));
    gap:22px;

    padding:28px;
  }

  .hero-pc-glow{
    position:absolute;
    inset:15% 10%;

    background:
      radial-gradient(
        circle,
        rgba(212,175,55,.22),
        transparent 65%
      );

    filter:blur(35px);
    pointer-events:none;
  }

  .hero-pc-logo{
    position:relative;
    z-index:2;

    min-height:235px;
    padding:18px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    overflow:hidden;

    border-radius:22px;
    border:1px solid rgba(212,175,55,.28);

    background:
      linear-gradient(
        to top,
        rgba(3,6,11,.98),
        rgba(3,6,11,.15)
      );

    box-shadow:
      0 22px 50px rgba(0,0,0,.55);

    transition:
      transform .3s ease,
      border-color .3s ease,
      box-shadow .3s ease;
  }

  .hero-pc-logo::before{

    content:"";

    position:absolute;

    inset:-120%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.22),

        transparent

    );

    transform:rotate(25deg);

    transition:.8s;

    z-index:2;

}

  .hero-pc-logo img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

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

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

  .hero-pc-logo strong,
  .hero-pc-logo span{
    position:relative;
    z-index:3;
  }

  .hero-pc-logo strong{
    color:white;
    font-size:23px;
    font-weight:900;
    letter-spacing:.5px;
  }

  .hero-pc-logo span{
    margin-top:5px;

    color:#cbd5e1;
    font-size:13px;
  }

  .hero-pc-logo:hover{

    transform:translateY(-18px) scale(1.03);

    border-color:#d4af37;

    box-shadow:

    0 0 35px rgba(212,175,55,.30),

    0 35px 80px rgba(0,0,0,.70);

}

.hero-pc-logo:hover::before{

    inset:120%;

}

  .hero-pc-logo:hover img{
    transform:scale(1.09);
  }

  .hero-netflix{
    transform:translateY(18px);
  }

  .hero-max{
    transform:translateY(-12px);
  }

  .hero-netflix:hover,
  .hero-max:hover{
    transform:translateY(-8px);
  }

  .hero-pc-catalogo,
  .hero-pc-whatsapp{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:190px;
    padding:15px 22px;

    border-radius:13px;

    text-decoration:none;
    font-size:15px;
    font-weight:900;

    transition:
      transform .2s ease,
      box-shadow .2s ease,
      background .2s ease;
  }

  .hero-pc-catalogo{
    background:
      linear-gradient(
        135deg,
        #d4af37,
        #f4d56c
      );

    color:#171000;

    box-shadow:
      0 12px 30px rgba(212,175,55,.25);
  }

  .hero-pc-whatsapp{
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.055);
    color:white;
  }

  .hero-pc-catalogo:hover,
  .hero-pc-whatsapp:hover{
    transform:translateY(-3px);
  }

  .hero-pc-whatsapp:hover{
    border-color:#25d366;
    box-shadow:0 0 24px rgba(37,211,102,.20);
  }
}
@media (min-width:769px){

  .hero-pc-v2{
    min-height:760px;
    padding-bottom:130px;
  }

  .hero-pc-beneficios{
    position:absolute;
    left:50%;
    bottom:30px;

    width:calc(100% - 110px);
    max-width:1400px;

    transform:translateX(-50%);

    display:grid;
    grid-template-columns:repeat(4, 1fr);

    border:1px solid rgba(212,175,55,.24);
    border-radius:20px;

    overflow:hidden;

    background:
      linear-gradient(
        180deg,
        rgba(13,16,23,.94),
        rgba(5,7,12,.97)
      );

    box-shadow:
      0 20px 50px rgba(0,0,0,.45),
      0 0 30px rgba(212,175,55,.08);

    backdrop-filter:blur(16px);

    z-index:5;
  }

  .hero-beneficio-item{
    display:flex;
    align-items:center;
    gap:14px;

    min-height:90px;

    padding:20px 24px;

    border-right:1px solid rgba(255,255,255,.08);
  }

  .hero-beneficio-item:last-child{
    border-right:none;
  }

  .hero-beneficio-item > span{
    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    flex-shrink:0;

    border-radius:50%;

    background:
      color-mix(
        in srgb,
        #d4af37 14%,
        rgba(255,255,255,.03)
      );

    border:1px solid rgba(212,175,55,.32);

    font-size:22px;

    box-shadow:
      0 0 18px rgba(212,175,55,.14);
  }

  .hero-beneficio-item strong{
    display:block;

    color:white;

    font-size:13px;
    font-weight:900;
    letter-spacing:.3px;
  }

  .hero-beneficio-item small{
    display:block;

    margin-top:4px;

    color:#9ca3af;

    font-size:11px;
    line-height:1.3;
  }

  .hero-beneficio-item{
    transition:
      background .25s ease,
      transform .25s ease;
  }

  .hero-beneficio-item:hover{
    background:rgba(212,175,55,.06);
    transform:translateY(-2px);
  }
}
@media (min-width:769px){
  .benefits{
    display:none !important;
  }
}
/*====================================
ANIMACIÓN FLOTANTE HERO
====================================*/

@keyframes flotarHero{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

@media (min-width:769px){

.hero-netflix{
    animation:flotarHero 6s ease-in-out infinite;
}

.hero-disney{
    animation:flotarHero 7s ease-in-out infinite;
    animation-delay:.5s;
}

.hero-max{
    animation:flotarHero 6.5s ease-in-out infinite;
    animation-delay:1s;
}

.hero-prime{
    animation:flotarHero 7.5s ease-in-out infinite;
    animation-delay:1.5s;
}

}

/* =====================================
   AJUSTE FINAL TARJETAS HERO PC
===================================== */

@media (min-width:769px){

  .hero-pc-logo::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;

    background:
      linear-gradient(
        to top,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.18) 50%,
        rgba(0,0,0,.02) 100%
      );

    pointer-events:none;
  }

  .hero-pc-logo img{
    opacity:1;
    filter:brightness(.96) saturate(1.08);

    transition:
      transform .45s ease,
      filter .35s ease;
  }

  .hero-pc-logo:hover img{
    transform:scale(1.08);
    filter:brightness(1.08) saturate(1.15);
  }

  .hero-pc-logo strong{
    position:relative;
    z-index:3;

    color:white;
    font-size:23px;
    font-weight:900;
    letter-spacing:.5px;

    text-shadow:
      0 3px 10px rgba(0,0,0,.95),
      0 0 20px rgba(0,0,0,.75);
  }

  .hero-pc-logo span{
    position:relative;
    z-index:3;

    margin-top:5px;

    color:#f3f4f6;
    font-size:13px;

    text-shadow:
      0 2px 8px rgba(0,0,0,.95);
  }

  .hero-pc-logo::before{
    z-index:2;
    pointer-events:none;
  }
}
/* =====================================
   TARJETAS HERO SIEMPRE CLARAS
===================================== */

@media (min-width:769px){

  /* Quita la capa oscura que apaga las imágenes */
  .hero-pc-logo::after{
    display:none !important;
  }

  .hero-pc-logo img{
    opacity:1 !important;
    filter:brightness(1.10) saturate(1.10) !important;

    transform:scale(1.03);

    transition:
      transform .45s ease,
      filter .35s ease;
  }

  /* Al tocar o pasar el mouse, solo hace un zoom suave */
  .hero-pc-logo:hover img{
    filter:brightness(1.10) saturate(1.10) !important;
    transform:scale(1.07);
  }

  /* Quita el efecto neón exagerado */
  .hero-pc-logo:hover{
    border-color:#d4af37;

    box-shadow:
      0 20px 50px rgba(0,0,0,.60),
      0 0 18px rgba(212,175,55,.16);
  }

  /* Oscurece únicamente la zona inferior detrás del texto */
  .hero-pc-logo strong,
  .hero-pc-logo span{
    padding-left:8px;
    padding-right:8px;

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

    text-shadow:
      0 2px 8px rgba(0,0,0,.95);
  }

  .hero-pc-logo strong{
    padding-top:7px;
    border-radius:8px 8px 0 0;
  }

  .hero-pc-logo span{
    margin-top:0;
    padding-top:3px;
    padding-bottom:7px;
    border-radius:0 0 8px 8px;
  }
}
/* =====================================
   LIMPIEZA FINAL TARJETAS HERO
===================================== */

@media (min-width:769px){

  /* Quita todos los efectos que oscurecen o cruzan la imagen */
  .hero-pc-logo::before,
  .hero-pc-logo::after{
    display:none !important;
  }

  /* Oculta los textos agregados porque la imagen ya los trae */
  .hero-pc-logo strong,
  .hero-pc-logo span{
    display:none !important;
  }

  /* Imagen clara siempre */
  .hero-pc-logo img{
    opacity:1 !important;
    filter:none !important;

    width:100%;
    height:100%;

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

    transform:scale(1.01);

    transition:
      transform .4s ease;
  }

  /* Hover limpio: solo zoom y borde suave */
  .hero-pc-logo:hover img{
    filter:none !important;
    opacity:1 !important;
    transform:scale(1.06);
  }

  .hero-pc-logo:hover{
    border-color:#d4af37;

    box-shadow:
      0 24px 55px rgba(0,0,0,.65),
      0 0 18px rgba(212,175,55,.16);
  }
}
/* =====================================
   PC V2 - CATÁLOGO PREMIUM
===================================== */

@media (min-width:769px){

  .catalogo{
    padding:70px 60px 85px;
    background:
      radial-gradient(
        circle at top center,
        rgba(212,175,55,.08),
        transparent 35%
      ),
      #05070c;
  }

  .top-section{
    width:100%;
    max-width:1400px;
    margin:0 auto 32px;

    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
  }

  .top-section small{
    color:#d4af37;
    font-size:12px;
    font-weight:900;
    letter-spacing:1.8px;
  }

  .top-section h2{
    margin:8px 0 0;

    color:white;
    font-size:38px;
    line-height:1.05;
  }

  #buscador{
    width:320px;
    padding:15px 17px;

    border-radius:14px;
    border:1px solid rgba(212,175,55,.24);

    background:#0b1018;
    color:white;

    outline:none;

    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.02);
  }

  #buscador:focus{
    border-color:#d4af37;
    box-shadow:
      0 0 20px rgba(212,175,55,.14);
  }

  #ayudaCatalogo,
  .catalogo-contador,
  .catalogo-puntos{
    display:none !important;
  }

  #productosGrid{
    width:100%;
    max-width:1400px;
    margin:0 auto;

    display:grid;
    gap:24px;

    overflow:visible;
    padding:0;
  }

  #productosGrid .card{
    position:relative;

    width:100%;
    max-width:none;
    margin:0;

    overflow:hidden;

    border-radius:22px;
    border:1px solid rgba(255,255,255,.09);

    background:
      linear-gradient(
        180deg,
        #0c1119,
        #06090f
      );

    transform:none;
    opacity:1;
    filter:none;

    box-shadow:
      0 18px 45px rgba(0,0,0,.42);

    transition:
      transform .28s ease,
      border-color .28s ease,
      box-shadow .28s ease;
  }

  #productosGrid .card:hover{
    transform:translateY(-10px);

    border-color:#d4af37;

    box-shadow:
      0 0 28px rgba(212,175,55,.16),
      0 28px 60px rgba(0,0,0,.58);
  }

  #productosGrid .cover{
    height:250px;
    padding:0;
    overflow:hidden;
  }

  #productosGrid .cover-img{
    width:100%;
    height:100%;

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

    transform:scale(1.02);

    transition:
      transform .45s ease,
      filter .35s ease;
  }

  #productosGrid .card:hover .cover-img{
    transform:scale(1.08);
    filter:brightness(1.06);
  }

  #productosGrid .cover-overlay{
    background:
      linear-gradient(
        to top,
        rgba(0,0,0,.94),
        transparent 68%
      );
  }

  #productosGrid .cover-overlay h3{
    left:18px;
    right:18px;
    bottom:16px;

    font-size:26px;
    line-height:1;
  }

  #productosGrid .plans{
    padding:18px 18px 12px;
  }

  #productosGrid .plan{
    padding:10px 0;

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

    font-size:14px;
  }

  #productosGrid .plan:last-child{
    border-bottom:none;
  }

  #productosGrid .plan strong{
    color:#f5d66b;
  }

  #productosGrid .buy{
    width:calc(100% - 36px);

    margin:8px 18px 18px;
    padding:14px;

    border-radius:13px;

    background:
      linear-gradient(
        135deg,
        #d4af37,
        #f3d56c
      );

    color:#171000;

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

    box-shadow:
      0 12px 28px rgba(212,175,55,.20);

    transition:
      transform .2s ease,
      box-shadow .2s ease;
  }

  #productosGrid .buy:hover{
    transform:translateY(-2px);

    box-shadow:
      0 0 22px rgba(212,175,55,.25);
  }

  .badge-destacado,
  .badge-oferta{
    z-index:20;
  }
}

/* =====================================
   PC V2 - PROMOCIONES PREMIUM
===================================== */

@media (min-width:769px){

  .promociones-home{
    width:100%;
    max-width:1400px;

    margin:0 auto;
    padding:75px 60px 85px;
  }

  .promociones-titulo{
    margin-bottom:28px;
  }

  .promociones-titulo small{
    color:#d4af37;
    font-size:12px;
    font-weight:900;
    letter-spacing:1.8px;
  }

  .promociones-titulo h2{
    margin:8px 0 7px;

    color:white;
    font-size:38px;
    line-height:1.05;
  }

  .promociones-titulo p{
    margin:0;
    color:#9ca3af;
    font-size:15px;
  }

  #ayudaPromociones{
    display:none !important;
  }

  .promo-slider{
    position:relative;

    width:100%;
    overflow:hidden;

    border-radius:24px;
  }

  .promo-track{
    display:flex;
    gap:22px;

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

    padding:10px 6px 28px;

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

    transform:none !important;
    transition:none !important;

    scrollbar-width:none;
  }

  .promo-track::-webkit-scrollbar{
    display:none;
  }

  .promo-card{
    overflow:hidden;

    scroll-snap-align:start;

    border-radius:22px;
    border:1px solid rgba(212,175,55,.22);

    background:
      linear-gradient(
        180deg,
        #0d121a,
        #070a10
      );

    text-decoration:none;

    box-shadow:
      0 22px 50px rgba(0,0,0,.48);

    transition:
      transform .28s ease,
      border-color .28s ease,
      box-shadow .28s ease;
  }

  .promo-card:hover{
    transform:translateY(-8px);

    border-color:#d4af37;

    box-shadow:
      0 0 30px rgba(212,175,55,.18),
      0 30px 65px rgba(0,0,0,.62);
  }

  .promo-card img{
    display:block;

    width:100%;
    height:420px;

    object-fit:contain;
    object-position:center;

    background:#03060b;

    transition:
      transform .45s ease,
      filter .35s ease;
  }

  .promo-card:hover img{
    transform:scale(1.035);
    filter:brightness(1.05);
  }

  .promo-card-info{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;

    padding:18px 20px;

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

    background:
      linear-gradient(
        180deg,
        rgba(17,23,34,.96),
        rgba(7,10,16,.98)
      );
  }

  .promo-card-info strong{
    color:white;
    font-size:15px;
    font-weight:900;
  }

  .promo-card-info span{
    flex-shrink:0;

    padding:11px 16px;

    border-radius:999px;

    background:
      linear-gradient(
        135deg,
        #d4af37,
        #f3d56c
      );

    color:#171000;

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

    box-shadow:
      0 10px 24px rgba(212,175,55,.20);
  }

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

    margin-top:4px;

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

  .promociones-contador strong{
    color:white;
  }

  .promociones-puntos{
    display:flex;
    justify-content:center;
    gap:8px;

    margin-top:11px;
  }

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

    border-radius:50%;

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

    transition:.25s;
  }

  .promocion-punto.activo{
    width:28px;

    border-radius:999px;

    background:#d4af37;

    box-shadow:
      0 0 14px rgba(212,175,55,.50);
  }
}

/* =====================================
   PC V2 - PAGOS Y FOOTER
===================================== */

@media (min-width:769px){

  .info{
    width:100%;
    max-width:1400px;

    margin:0 auto;
    padding:70px 60px;

    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:28px;

    background:#05070c;
  }

  .info > div{
    padding:26px;

    border-radius:20px;
    border:1px solid rgba(212,175,55,.18);

    background:
      linear-gradient(
        180deg,
        rgba(14,18,27,.96),
        rgba(7,10,16,.98)
      );

    box-shadow:
      0 20px 45px rgba(0,0,0,.42);
  }

  .info h3{
    margin:0 0 20px;

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

  .info-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }

  .info-grid p{
    margin:0;
    padding:15px;

    border-radius:14px;
    border:1px solid rgba(255,255,255,.07);

    background:rgba(255,255,255,.035);
    color:#e5e7eb;

    font-weight:800;

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

  .info-grid p:hover{
    transform:translateY(-3px);
    border-color:rgba(212,175,55,.36);
  }

  .payments{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }

  .payments span{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:64px;
    padding:15px;

    border-radius:14px;
    border:1px solid rgba(212,175,55,.18);

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

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

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

  .payments span:hover{
    transform:translateY(-3px);

    border-color:#d4af37;
    background:rgba(212,175,55,.06);
  }

  footer{
    width:100%;
    padding:34px 60px;

    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:22px;

    border-top:1px solid rgba(212,175,55,.16);

    background:
      linear-gradient(
        180deg,
        #070a10,
        #020305
      );
  }

  footer img{
    width:58px;
    height:58px;

    object-fit:cover;
    border-radius:16px;

    border:1px solid rgba(212,175,55,.24);
  }

  footer h3{
    margin:0;

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

  footer p{
    margin:5px 0 0;

    color:#9ca3af;
    font-size:13px;
  }

  footer a{
    margin:0;

    padding:12px 18px;

    border-radius:999px;

    background:
      linear-gradient(
        135deg,
        #d4af37,
        #f3d56c
      );

    color:#171000;

    text-decoration:none;
    font-weight:900;

    box-shadow:
      0 10px 25px rgba(212,175,55,.18);
  }

  .float-wa{
    width:60px;
    height:60px;

    right:24px;
    bottom:24px;

    box-shadow:
      0 16px 35px rgba(0,0,0,.45),
      0 0 24px rgba(37,211,102,.24);
  }
}
/* =====================================
   PC V2 - NAVEGACIÓN PREMIUM
===================================== */

@media (min-width:769px){

  .nav{
    width:100%;

    padding:14px 38px;

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

    border-bottom:1px solid rgba(212,175,55,.16);

    background:
      linear-gradient(
        180deg,
        rgba(3,5,9,.96),
        rgba(2,3,6,.92)
      );

    backdrop-filter:blur(18px);

    box-shadow:
      0 12px 30px rgba(0,0,0,.32);
  }

  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }

  .brand img{
    width:46px;
    height:46px;

    object-fit:cover;
    border-radius:14px;

    border:1px solid rgba(212,175,55,.24);

    box-shadow:
      0 0 18px rgba(212,175,55,.10);
  }

  .brand span{
    color:white;

    font-size:19px;
    font-weight:900;
    letter-spacing:.5px;
  }

  .links{
    display:flex;
    align-items:center;
    gap:12px;
  }

  .links a{
    position:relative;

    padding:11px 14px;

    color:#e5e7eb;

    text-decoration:none;
    font-size:14px;
    font-weight:800;

    border-radius:10px;

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

  .links a:not(.wa)::after{
    content:"";

    position:absolute;
    left:14px;
    right:14px;
    bottom:6px;

    height:2px;

    border-radius:999px;

    background:#d4af37;

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

    transition:transform .25s ease;
  }

  .links a:not(.wa):hover{
    color:#f5d66b;
    background:rgba(212,175,55,.06);
    transform:translateY(-1px);
  }

  .links a:not(.wa):hover::after{
    transform:scaleX(1);
  }

  .links .wa{
    margin-left:8px;

    padding:12px 18px;

    border:1px solid rgba(37,211,102,.50);
    border-radius:999px;

    background:rgba(37,211,102,.08);
    color:#5df28a;

    box-shadow:
      0 0 20px rgba(37,211,102,.08);
  }

  .links .wa:hover{
    background:#25d366;
    color:#04110a;

    box-shadow:
      0 0 26px rgba(37,211,102,.24);
  }
}
/* =====================================
   PROMOCIÓN PRINCIPAL PC
===================================== */

@media (min-width:769px){

  .promo-destacada-pc{
    width:calc(100% - 120px);
    max-width:1400px;

    margin:55px auto 20px;

    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:center;

    overflow:hidden;

    border:1px solid rgba(212,175,55,.35);
    border-radius:24px;

    background:
      radial-gradient(
        circle at right,
        rgba(212,175,55,.12),
        transparent 42%
      ),
      #070a10;

    box-shadow:
      0 28px 70px rgba(0,0,0,.52),
      0 0 30px rgba(212,175,55,.08);
  }

  .promo-destacada-pc-imagen{
    height:460px;
    overflow:hidden;
    background:#03060b;
  }

  .promo-destacada-pc-imagen img{
    width:100%;
    height:100%;

    display:block;

    object-fit:contain;
    object-position:center;

    transition:transform .5s ease;
  }

  .promo-destacada-pc:hover img{
    transform:scale(1.035);
  }

  .promo-destacada-pc-info{
    padding:42px;
  }

  .promo-destacada-pc-info small{
    color:#d4af37;

    font-size:12px;
    font-weight:900;
    letter-spacing:1.7px;
  }

  .promo-destacada-pc-info h2{
    margin:12px 0 14px;

    color:white;
    font-size:38px;
    line-height:1.05;
  }

  .promo-destacada-pc-info p{
    max-width:470px;
    margin:0 0 25px;

    color:#aeb5c1;
    font-size:16px;
    line-height:1.6;
  }

  .promo-destacada-pc-info a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:15px 22px;

    border-radius:13px;

    background:
      linear-gradient(
        135deg,
        #d4af37,
        #f3d56c
      );

    color:#171000;

    text-decoration:none;
    font-weight:900;

    box-shadow:
      0 14px 30px rgba(212,175,55,.22);
  }
}

@media (max-width:768px){
  .promo-destacada-pc{
    display:none !important;
  }
}
/* =====================================
   FLECHAS PROMOCIONES PC
===================================== */

@media (min-width:769px){

  .promo-slider{
    position:relative;
  }

  .promo-pc-flecha{
    position:absolute;
    top:50%;
    z-index:30;

    width:52px;
    height:52px;

    display:grid;
    place-items:center;

    transform:translateY(-50%);

    border:1px solid rgba(212,175,55,.45);
    border-radius:50%;

    background:rgba(3,6,11,.90);
    color:#f3d56c;

    font-size:34px;
    line-height:1;

    cursor:pointer;
    backdrop-filter:blur(12px);

    box-shadow:
      0 12px 30px rgba(0,0,0,.55),
      0 0 18px rgba(212,175,55,.12);

    transition:
      transform .2s ease,
      background .2s ease,
      opacity .2s ease;
  }

  .promo-pc-anterior{
    left:18px;
  }

  .promo-pc-siguiente{
    right:18px;
  }

  .promo-pc-flecha:hover{
    transform:translateY(-50%) scale(1.08);
    background:#d4af37;
    color:#171000;
  }

  .promo-pc-flecha:disabled{
    opacity:.25;
    cursor:not-allowed;
  }
}

@media (max-width:768px){
  .promo-pc-flecha{
    display:none !important;
  }
}
/* =====================================
   HERO PC CON COLOR DINÁMICO
===================================== */

@media (min-width:769px){

  .hero-pc-v2{
    --hero-color:#e50914;

    background:
      radial-gradient(
        circle at 78% 38%,
        color-mix(
          in srgb,
          var(--hero-color) 22%,
          transparent
        ),
        transparent 34%
      ),
      #05070c;

    transition:background .45s ease;
  }

  .hero-pc-fondo{
    background:
      radial-gradient(
        circle at top right,
        color-mix(
          in srgb,
          var(--hero-color) 20%,
          transparent
        ),
        transparent 36%
      ),
      radial-gradient(
        circle at bottom left,
        rgba(255,255,255,.035),
        transparent 30%
      ),
      linear-gradient(135deg,#05070c,#0b1019);
  }

  .hero-pc-badge{
    background:
      color-mix(
        in srgb,
        var(--hero-color) 16%,
        transparent
      );

    border-color:
      color-mix(
        in srgb,
        var(--hero-color) 70%,
        white
      );

    color:white;

    box-shadow:
      0 0 20px
      color-mix(
        in srgb,
        var(--hero-color) 20%,
        transparent
      );
  }

  .hero-pc-texto h1 span{
    color:var(--hero-color);

    text-shadow:
      0 0 28px
      color-mix(
        in srgb,
        var(--hero-color) 38%,
        transparent
      );
  }

  .hero-pc-catalogo{
    background:
      linear-gradient(
        135deg,
        var(--hero-color),
        color-mix(
          in srgb,
          var(--hero-color) 68%,
          white
        )
      );

    color:white;

    box-shadow:
      0 14px 30px
      color-mix(
        in srgb,
        var(--hero-color) 26%,
        transparent
      );
  }

  .hero-pc-logo{
    --card-color:#ff2d2d;

    border-color:
      color-mix(
        in srgb,
        var(--card-color) 42%,
        rgba(255,255,255,.10)
      );
  }

  .hero-pc-logo:hover{
    border-color:var(--card-color);

    box-shadow:
      0 0 30px
      color-mix(
        in srgb,
        var(--card-color) 30%,
        transparent
      ),
      0 28px 60px rgba(0,0,0,.65);
  }

  .hero-netflix{
    --card-color:#e50914;
  }

  .hero-disney{
    --card-color:#1464f4;
  }

  .hero-max{
    --card-color:#7c3aed;
  }

  .hero-prime{
    --card-color:#00a8e1;
  }

  .hero-pc-beneficios{
    border-color:
      color-mix(
        in srgb,
        var(--hero-color) 28%,
        rgba(255,255,255,.08)
      );

    box-shadow:
      0 20px 50px rgba(0,0,0,.45),
      0 0 30px
      color-mix(
        in srgb,
        var(--hero-color) 10%,
        transparent
      );
  }

  .hero-beneficio-item > span{
    background:
      color-mix(
        in srgb,
        var(--hero-color) 14%,
        rgba(255,255,255,.03)
      );

    border-color:
      color-mix(
        in srgb,
        var(--hero-color) 36%,
        transparent
      );
  }
}
/* =====================================
   CATÁLOGO PC CON COLOR POR PLATAFORMA
===================================== */

@media (min-width:769px){

  #productosGrid .card{
    --catalogo-color:#ff2d2d;

    border-color:
      color-mix(
        in srgb,
        var(--catalogo-color) 32%,
        rgba(255,255,255,.08)
      );
  }

  #productosGrid .card:hover{
    border-color:var(--catalogo-color);

    box-shadow:
      0 0 30px
      color-mix(
        in srgb,
        var(--catalogo-color) 28%,
        transparent
      ),
      0 30px 65px rgba(0,0,0,.62);
  }

  #productosGrid .card::before{
    content:"";

    position:absolute;
    inset:0;
    z-index:0;

    pointer-events:none;

    background:
      radial-gradient(
        circle at top,
        color-mix(
          in srgb,
          var(--catalogo-color) 14%,
          transparent
        ),
        transparent 40%
      );
  }

  #productosGrid .card > *{
    position:relative;
    z-index:1;
  }

  #productosGrid .buy{
    background:
      linear-gradient(
        135deg,
        var(--catalogo-color),
        color-mix(
          in srgb,
          var(--catalogo-color) 70%,
          white
        )
      );

    color:white;

    box-shadow:
      0 12px 28px
      color-mix(
        in srgb,
        var(--catalogo-color) 24%,
        transparent
      );
  }

  #productosGrid .buy:hover{
    box-shadow:
      0 0 24px
      color-mix(
        in srgb,
        var(--catalogo-color) 38%,
        transparent
      );
  }

  #productosGrid .plan strong{
    color:var(--catalogo-color);
  }

  #productosGrid .cover-overlay h3{
    text-shadow:
      0 0 18px
      color-mix(
        in srgb,
        var(--catalogo-color) 55%,
        transparent
      ),
      0 3px 10px rgba(0,0,0,.95);
  }

  #productosGrid .badge-destacado{
    border-color:
      color-mix(
        in srgb,
        var(--catalogo-color) 55%,
        white
      );

    background:
      color-mix(
        in srgb,
        var(--catalogo-color) 88%,
        black
      );

    box-shadow:
      0 0 18px
      color-mix(
        in srgb,
        var(--catalogo-color) 35%,
        transparent
      );
  }

  #productosGrid .badge-oferta{
    background:
      linear-gradient(
        135deg,
        var(--catalogo-color),
        color-mix(
          in srgb,
          var(--catalogo-color) 68%,
          white
        )
      );

    color:white;
  }
}

/* ==========================================
   APARIENCIA GLOBAL CONFIGURABLE — PC
   RESPETA COLORES INDIVIDUALES DE PLATAFORMA
========================================== */

@media (min-width:769px){

  /* ========================================
     HERO Y FONDOS GENERALES
  ======================================== */

  .hero-pc-v2{
    background:
      radial-gradient(
        circle at 78% 38%,
        color-mix(
          in srgb,
          var(--hero-color, var(--pechy-principal)) 22%,
          transparent
        ),
        transparent 34%
      ),
      color-mix(
        in srgb,
        var(--pechy-secundario) 30%,
        #05070c
      );
  }


  .hero-pc-fondo{
    background:
      radial-gradient(
        circle at top right,
        color-mix(
          in srgb,
          var(--hero-color, var(--pechy-principal)) 20%,
          transparent
        ),
        transparent 36%
      ),
      radial-gradient(
        circle at bottom left,
        rgba(255,255,255,.035),
        transparent 30%
      ),
      linear-gradient(
        135deg,
        color-mix(
          in srgb,
          var(--pechy-secundario) 35%,
          #05070c
        ),
        color-mix(
          in srgb,
          var(--pechy-secundario) 65%,
          #0b1019
        )
      );
  }


  /* ========================================
     ACENTO PREMIUM
  ======================================== */

  .hero-pc-texto h1 span,
  .top-section small,
  .promociones-titulo small,
  .promo-destacada-pc-info small{
    color:var(--pechy-acento);
  }


  .hero-pc-badge{
    background:
      color-mix(
        in srgb,
        var(--pechy-acento) 16%,
        transparent
      );

    border-color:
      color-mix(
        in srgb,
        var(--pechy-acento) 70%,
        white
      );

    color:
      color-mix(
        in srgb,
        var(--pechy-acento) 72%,
        white
      );
  }


  .hero-pc-beneficios{
    border-color:
      color-mix(
        in srgb,
        var(--pechy-acento) 28%,
        rgba(255,255,255,.08)
      );

    box-shadow:
      0 20px 50px rgba(0,0,0,.45),
      0 0 30px
      color-mix(
        in srgb,
        var(--pechy-acento) 10%,
        transparent
      );
  }


  .hero-beneficio-item > span{
    background:
      color-mix(
        in srgb,
        var(--pechy-acento) 14%,
        rgba(255,255,255,.03)
      );

    border-color:
      color-mix(
        in srgb,
        var(--pechy-acento) 36%,
        transparent
      );
  }


  /* ========================================
     CATÁLOGO GENERAL
  ======================================== */

  .catalogo{
    background:
      radial-gradient(
        circle at top center,
        color-mix(
          in srgb,
          var(--pechy-acento) 8%,
          transparent
        ),
        transparent 35%
      ),
      color-mix(
        in srgb,
        var(--pechy-secundario) 30%,
        #05070c
      );
  }


  #buscador{
    border-color:
      color-mix(
        in srgb,
        var(--pechy-acento) 24%,
        transparent
      );

    background:
      color-mix(
        in srgb,
        var(--pechy-secundario) 72%,
        #0b1018
      );
  }


  #buscador:focus{
    border-color:var(--pechy-acento);

    box-shadow:
      0 0 20px
      color-mix(
        in srgb,
        var(--pechy-acento) 14%,
        transparent
      );
  }


  /* Cada producto conserva su propio color */

  #productosGrid .card{
    --catalogo-color:
      var(--catalogo-color, var(--pechy-principal));
  }


  #productosGrid .card:hover{
    border-color:var(--catalogo-color);
  }


  #productosGrid .plan strong{
    color:var(--catalogo-color);
  }


  #productosGrid .buy{
    background:
      linear-gradient(
        135deg,
        var(--catalogo-color),
        color-mix(
          in srgb,
          var(--catalogo-color) 70%,
          white
        )
      ) !important;

    color:white !important;
  }


  /* ========================================
     PROMOCIONES
  ======================================== */

  .promo-card{
    border-color:
      color-mix(
        in srgb,
        var(--pechy-acento) 22%,
        transparent
      );

    background:
      linear-gradient(
        180deg,
        color-mix(
          in srgb,
          var(--pechy-secundario) 76%,
          #0d121a
        ),
        color-mix(
          in srgb,
          var(--pechy-secundario) 45%,
          #070a10
        )
      );
  }


  .promo-card:hover{
    border-color:var(--pechy-acento);

    box-shadow:
      0 0 30px
      color-mix(
        in srgb,
        var(--pechy-acento) 18%,
        transparent
      ),
      0 30px 65px rgba(0,0,0,.62);
  }


  .promocion-punto.activo{
    background:var(--pechy-acento);

    box-shadow:
      0 0 14px
      color-mix(
        in srgb,
        var(--pechy-acento) 50%,
        transparent
      );
  }


  .promo-pc-flecha{
    border-color:
      color-mix(
        in srgb,
        var(--pechy-acento) 45%,
        transparent
      );

    color:
      color-mix(
        in srgb,
        var(--pechy-acento) 72%,
        white
      );
  }


  .promo-pc-flecha:hover{
    background:var(--pechy-acento);
    color:#171000;
  }


  /* ========================================
     INFORMACIÓN, PAGOS Y FOOTER
  ======================================== */

  .info{
    background:
      color-mix(
        in srgb,
        var(--pechy-secundario) 30%,
        #05070c
      );
  }


  .info > div{
    border-color:
      color-mix(
        in srgb,
        var(--pechy-acento) 18%,
        transparent
      );

    background:
      linear-gradient(
        180deg,
        color-mix(
          in srgb,
          var(--pechy-secundario) 78%,
          #0e121b
        ),
        color-mix(
          in srgb,
          var(--pechy-secundario) 48%,
          #070a10
        )
      );
  }


  .payments span{
    border-color:
      color-mix(
        in srgb,
        var(--pechy-acento) 18%,
        transparent
      );
  }


  .payments span:hover{
    border-color:var(--pechy-acento);

    background:
      color-mix(
        in srgb,
        var(--pechy-acento) 6%,
        transparent
      );
  }


  footer{
    border-top-color:
      color-mix(
        in srgb,
        var(--pechy-acento) 16%,
        transparent
      );

    background:
      linear-gradient(
        180deg,
        color-mix(
          in srgb,
          var(--pechy-secundario) 48%,
          #070a10
        ),
        #020305
      );
  }


  footer img{
    border-color:
      color-mix(
        in srgb,
        var(--pechy-acento) 24%,
        transparent
      );
  }


  /* ========================================
     NAVEGACIÓN
  ======================================== */

  .nav{
    border-bottom-color:
      color-mix(
        in srgb,
        var(--pechy-acento) 16%,
        transparent
      );
  }


  .brand img{
    border-color:
      color-mix(
        in srgb,
        var(--pechy-acento) 24%,
        transparent
      );

    box-shadow:
      0 0 18px
      color-mix(
        in srgb,
        var(--pechy-acento) 10%,
        transparent
      );
  }


  .brand span{
    color:var(--pechy-acento);
  }


  .links a:not(.wa)::after{
    background:var(--pechy-acento);
  }


  .links a:not(.wa):hover{
    color:
      color-mix(
        in srgb,
        var(--pechy-acento) 72%,
        white
      );

    background:
      color-mix(
        in srgb,
        var(--pechy-acento) 6%,
        transparent
      );
  }


  /* WhatsApp permanece verde */

  .links .wa,
  .float-wa{
    border-color:#25d366 !important;
    background:#25d366 !important;
    color:#04110a !important;
  }

}

/* ==========================================
   COLORES INDIVIDUALES — BENEFICIOS HERO PC
========================================== */

@media (min-width:769px){

  /* Color general de respaldo */

  .hero-beneficio-item{
    --beneficio-color:var(--pechy-acento);
  }


  /* 1. Entrega inmediata */

  .hero-beneficio-item:nth-child(1){
    --beneficio-color:#ff9f2f;
  }


  /* 2. Cuentas seguras */

  .hero-beneficio-item:nth-child(2){
    --beneficio-color:#3b82f6;
  }


  /* 3. Soporte 24/7 */

  .hero-beneficio-item:nth-child(3){
    --beneficio-color:#a78bfa;
  }


  /* 4. Precios bajos */

  .hero-beneficio-item:nth-child(4){
    --beneficio-color:#ff4d38;
  }


  /* Círculo del icono */

  .hero-beneficio-item > span{

    background:
      color-mix(
        in srgb,
        var(--beneficio-color) 15%,
        rgba(255,255,255,.03)
      ) !important;

    border-color:
      color-mix(
        in srgb,
        var(--beneficio-color) 38%,
        transparent
      ) !important;

    box-shadow:
      0 0 18px
      color-mix(
        in srgb,
        var(--beneficio-color) 18%,
        transparent
      ) !important;

    transition:
      background .25s ease,
      border-color .25s ease,
      box-shadow .25s ease,
      transform .25s ease;

  }


  /* Estado al pasar el mouse */

  .hero-beneficio-item:hover{

    background:
      color-mix(
        in srgb,
        var(--beneficio-color) 8%,
        transparent
      ) !important;

    transform:
      translateY(-3px);

  }


  .hero-beneficio-item:hover > span{

    background:
      color-mix(
        in srgb,
        var(--beneficio-color) 22%,
        rgba(255,255,255,.04)
      ) !important;

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

    box-shadow:
      0 0 24px
      color-mix(
        in srgb,
        var(--beneficio-color) 36%,
        transparent
      ) !important;

    transform:
      scale(1.08);

  }


  /* El título toma el color al pasar el mouse */

  .hero-beneficio-item strong{

    transition:
      color .25s ease,
      text-shadow .25s ease;

  }


  .hero-beneficio-item:hover strong{

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

    text-shadow:
      0 0 16px
      color-mix(
        in srgb,
        var(--beneficio-color) 38%,
        transparent
      );

  }


  /* El texto pequeño también toma un tono del color */

  .hero-beneficio-item small{

    transition:
      color .25s ease;

  }


  .hero-beneficio-item:hover small{

    color:
      color-mix(
        in srgb,
        var(--beneficio-color) 58%,
        white
      ) !important;

  }

}

/* ==========================================
   DESKTOP SHELL 2026
   Capa de consistencia exclusiva para tablet
   horizontal, laptop y escritorio.
========================================== */

@media (min-width:769px){

  :root{
    --public-max-width:1480px;
    --public-gutter:clamp(24px, 4vw, 56px);
    --public-section-gap:clamp(52px, 5vw, 72px);
    --public-card-gap:clamp(18px, 1.7vw, 24px);
    --public-header-height:72px;
    --desktop-category-height:92px;
    --public-nav-gap:clamp(10px, 1.3vw, 20px);
  }

  html,
  body{
    overflow-x:hidden;
  }

  body{
    color:var(--text-primary);
    background:
      radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--brand-primary) 7%, transparent), transparent 27rem),
      radial-gradient(circle at 88% 38%, color-mix(in srgb, var(--brand-accent) 4%, transparent), transparent 32rem),
      linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 94%, #000), var(--bg-primary));
    background-attachment:scroll;
    font-family:var(--public-font, Inter), system-ui, sans-serif;
    font-size:var(--public-font-size, 16px);
  }

  h1,
  h2,
  h3{
    font-weight:var(--public-heading-weight, 800);
  }

  .nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    width:100%;
    min-height:var(--public-header-height);
    padding:12px max(
      var(--public-gutter),
      calc((100vw - var(--public-max-width)) / 2 + var(--public-gutter))
    );
    border-bottom-color:var(--border);
    box-shadow:0 10px 40px rgba(0,0,0,.18);
    background:color-mix(in srgb, var(--bg-primary) 84%, transparent);
    backdrop-filter:blur(18px) saturate(120%);
  }

  .public-header-placeholder{
    display:block;
    width:100%;
    height:var(--public-header-height);
    pointer-events:none;
  }

  .brand{
    min-width:0;
  }

  .brand img{
    width:44px;
    height:44px;
    border-radius:calc(var(--radius) * .72);
  }

  .brand span{
    max-width:clamp(220px, 32vw, 520px);
    overflow:hidden;
    color:var(--brand-accent);
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .links{
    min-width:0;
    gap:var(--public-nav-gap);
  }

  .links a{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding-inline:clamp(10px, 1.1vw, 16px);
    border-radius:999px;
    font-size:clamp(.82rem, 1.05vw, .95rem);
    white-space:nowrap;
    transition:color .2s ease, background .2s ease, transform .2s ease;
  }

  .links a:not(.wa):hover{
    color:var(--text-primary);
    background:color-mix(in srgb, var(--surface) 72%, transparent);
    transform:translateY(-1px);
  }

  .links a:focus-visible,
  .hero-pc-botones a:focus-visible,
  .categoria-btn:focus-visible,
  .categoria-ver-todo:focus-visible,
  .buy:focus-visible,
  .promo-pc-flecha:focus-visible,
  .cartelera-ver:focus-visible,
  footer a:focus-visible{
    outline:3px solid color-mix(in srgb, var(--brand-accent) 75%, white);
    outline-offset:3px;
  }

  .hero-pc-v2{
    width:100%;
    min-height:0;
    padding:clamp(44px, 5vw, 72px) var(--public-gutter) 0;
    display:block;
    isolation:isolate;
  }

  .hero-pc-contenido{
    width:100%;
    max-width:var(--public-max-width);
    min-height:0;
    margin:0 auto;
    grid-template-columns:minmax(0, 1.05fr) minmax(380px, .95fr);
    gap:clamp(36px, 5vw, 76px);
    align-items:center;
  }

  .hero-pc-texto,
  .hero-pc-plataformas{
    min-width:0;
  }

  .hero-pc-texto h1{
    max-width:760px;
    margin:16px 0 18px;
    font-size:clamp(2.75rem, 4.3vw, 4.75rem);
    line-height:.98;
  }

  .hero-pc-texto p{
    max-width:660px;
    font-size:clamp(1rem, 1.25vw, 1.15rem);
    line-height:1.65;
  }

  .hero-pc-badge{
    max-width:100%;
    padding:clamp(8px, .8vw, 10px) clamp(13px, 1.2vw, 18px);
    font-size:clamp(.76rem, .9vw, .9rem);
    line-height:1.25;
    white-space:normal;
  }

  .hero-pc-botones{
    margin-top:28px;
    gap:12px;
    flex-wrap:wrap;
  }

  .hero-pc-catalogo,
  .hero-pc-whatsapp{
    min-height:50px;
    padding:14px 20px;
    border-radius:calc(var(--radius) * .75);
  }

  .hero-pc-plataformas{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    padding:0;
    align-self:center;
  }

  .hero-pc-logo{
    min-width:0;
    min-height:0;
    aspect-ratio:16 / 10;
    border-radius:var(--radius);
    transform:none;
  }

  .hero-netflix,
  .hero-max,
  .hero-netflix:hover,
  .hero-max:hover{
    transform:none;
  }

  .hero-pc-logo:hover{
    transform:translateY(-4px) scale(1.015);
  }

  .hero-pc-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .hero-pc-beneficios{
    position:relative;
    left:auto;
    bottom:auto;
    width:100%;
    max-width:var(--public-max-width);
    margin:clamp(34px, 4vw, 52px) auto 0;
    transform:none;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    overflow:hidden;
    border-color:var(--border);
    border-radius:var(--radius) var(--radius) 0 0;
    box-shadow:0 26px 70px rgba(0,0,0,.22);
    background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--bg-secondary) 94%, transparent));
    backdrop-filter:blur(14px);
  }

  .hero-beneficio-item{
    min-height:88px;
    padding:18px clamp(16px, 2vw, 24px);
  }

  .desktop-category-access{
    position:relative;
    z-index:900;
    width:min(calc(100% - (var(--public-gutter) * 2)), var(--public-max-width));
    min-height:92px;
    margin:24px auto 0;
    padding:16px 20px;
    display:flex;
    align-items:center;
    gap:22px;
    border:1px solid color-mix(in srgb, var(--brand-accent) 20%, var(--border));
    border-radius:var(--radius);
    background:linear-gradient(135deg, color-mix(in srgb, var(--surface) 91%, #050506), color-mix(in srgb, var(--bg-secondary) 88%, transparent));
    box-shadow:0 18px 50px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035);
    backdrop-filter:blur(16px) saturate(115%);
    transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  .desktop-category-access.is-fixed{
    position:fixed;
    top:var(--public-header-height);
    margin:0;
    border-color:color-mix(in srgb, var(--brand-accent) 30%, var(--border));
    border-bottom-color:color-mix(in srgb, var(--brand-primary) 24%, var(--border));
    background:linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, #050506), color-mix(in srgb, var(--bg-primary) 94%, #000));
    box-shadow:0 14px 34px rgba(0,0,0,.42), 0 1px color-mix(in srgb, var(--brand-accent) 16%, transparent);
    backdrop-filter:blur(20px) saturate(125%);
  }

  .desktop-category-access-placeholder{
    display:none;
    width:min(calc(100% - (var(--public-gutter) * 2)), var(--public-max-width));
    height:var(--desktop-category-height);
    margin:24px auto 0;
  }

  .desktop-category-access-placeholder.is-active{
    display:block;
  }

  .desktop-category-access__intro{
    flex:0 0 auto;
    padding-right:22px;
    border-right:1px solid color-mix(in srgb, var(--brand-accent) 24%, var(--border));
  }

  .desktop-category-access__intro small,
  .desktop-category-access__intro strong{
    display:block;
  }

  .desktop-category-access__intro small{
    color:var(--brand-accent);
    font-size:.64rem;
    font-weight:900;
    letter-spacing:.14em;
  }

  .desktop-category-access__intro strong{
    margin-top:4px;
    color:var(--text-primary);
    text-shadow:0 0 18px color-mix(in srgb, var(--brand-accent) 12%, transparent);
  }

  .desktop-category-carousel{
    position:relative;
    min-width:0;
    flex:1 1 auto;
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    gap:8px;
  }

  .desktop-category-carousel__viewport{
    position:relative;
    min-width:0;
    overflow:hidden;
    isolation:isolate;
  }

  .desktop-category-carousel__viewport::before,
  .desktop-category-carousel__viewport::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    z-index:3;
    width:clamp(18px, 3vw, 38px);
    pointer-events:none;
    transition:opacity .2s ease;
  }

  .desktop-category-carousel__viewport::before{
    left:0;
    background:linear-gradient(90deg, color-mix(in srgb, var(--surface) 96%, #050506), transparent);
  }

  .desktop-category-carousel__viewport::after{
    right:0;
    background:linear-gradient(270deg, color-mix(in srgb, var(--surface) 96%, #050506), transparent);
  }

  .desktop-category-carousel.is-static{
    grid-template-columns:minmax(0, 1fr);
  }

  .desktop-category-carousel.is-static .desktop-category-carousel__arrow{
    display:none;
  }

  .desktop-category-carousel.is-static .desktop-category-carousel__viewport::before,
  .desktop-category-carousel.is-static .desktop-category-carousel__viewport::after{
    opacity:0;
  }

  .desktop-category-carousel.is-static .desktop-category-access__links{
    justify-content:center;
    cursor:default;
  }

  .desktop-category-carousel__arrow{
    position:relative;
    z-index:5;
    width:34px;
    height:34px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid color-mix(in srgb, var(--brand-accent) 42%, var(--border));
    border-radius:50%;
    background:color-mix(in srgb, var(--bg-primary) 88%, transparent);
    color:color-mix(in srgb, var(--brand-accent) 82%, white);
    font:800 1.25rem/1 var(--public-font, Inter), sans-serif;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.3), 0 0 12px color-mix(in srgb, var(--brand-accent) 8%, transparent);
    transition:transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  .desktop-category-carousel__arrow:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb, var(--brand-accent) 76%, white);
    color:#fff;
    background:color-mix(in srgb, var(--brand-accent) 14%, var(--surface));
    box-shadow:0 10px 24px rgba(0,0,0,.34), 0 0 18px color-mix(in srgb, var(--brand-accent) 20%, transparent);
  }

  .desktop-category-carousel__arrow:focus-visible{
    outline:3px solid color-mix(in srgb, var(--brand-accent) 75%, white);
    outline-offset:3px;
  }

  .desktop-category-access__links{
    min-width:0;
    width:100%;
    display:flex;
    gap:11px;
    padding:3px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    touch-action:pan-x pan-y pinch-zoom;
    cursor:grab;
    user-select:none;
  }

  .desktop-category-access__links.is-dragging{
    cursor:grabbing;
    scroll-behavior:auto;
  }

  .desktop-category-access__links::-webkit-scrollbar{
    display:none;
  }

  .desktop-category-access__links a{
    flex:0 0 auto;
    min-height:48px;
    padding:10px 16px 10px 11px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    border:1px solid color-mix(in srgb, var(--brand-accent) 16%, var(--border));
    border-radius:999px;
    color:color-mix(in srgb, var(--text-primary) 76%, var(--text-secondary));
    background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, transparent), color-mix(in srgb, var(--bg-secondary) 88%, transparent));
    font-size:.84rem;
    font-weight:800;
    text-decoration:none;
    box-shadow:0 9px 24px rgba(0,0,0,.14);
    transition:border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
  }

  .desktop-category-access__links a span{
    width:28px;
    height:28px;
    flex:0 0 28px;
    display:grid;
    place-items:center;
    border:1px solid color-mix(in srgb, var(--brand-accent) 42%, var(--border));
    border-radius:50%;
    color:color-mix(in srgb, var(--brand-accent) 86%, white);
    background:color-mix(in srgb, var(--brand-accent) 12%, var(--surface));
    font-size:.9rem;
    box-shadow:0 0 14px color-mix(in srgb, var(--brand-accent) 9%, transparent);
  }

  .desktop-category-access__links a:hover:not(.is-active){
    border-color:color-mix(in srgb, var(--category-hover-accent) 68%, var(--border));
    color:var(--text-primary);
    background:linear-gradient(180deg, color-mix(in srgb, var(--category-hover-accent) 13%, var(--surface)), color-mix(in srgb, var(--bg-secondary) 90%, transparent));
    transform:translateY(-1px);
    box-shadow:0 13px 30px rgba(0,0,0,.25), 0 0 18px color-mix(in srgb, var(--category-hover-accent) 18%, transparent);
  }

  .desktop-category-access__links a:hover:not(.is-active) span{
    border-color:color-mix(in srgb, var(--category-hover-accent) 72%, var(--border));
    color:color-mix(in srgb, var(--category-hover-accent) 76%, white);
    background:color-mix(in srgb, var(--category-hover-accent) 14%, var(--surface));
    box-shadow:0 0 16px color-mix(in srgb, var(--category-hover-accent) 24%, transparent);
  }

  .desktop-category-access__links a.is-active{
    border-color:color-mix(in srgb, var(--brand-primary) 78%, var(--border));
    color:var(--text-primary);
    background:linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 21%, var(--surface)), color-mix(in srgb, var(--surface) 94%, #080808));
    box-shadow:0 0 18px color-mix(in srgb, var(--brand-primary) 17%, transparent), inset 0 1px rgba(255,255,255,.05);
  }

  .desktop-category-access__links a.is-active span{
    border-color:color-mix(in srgb, var(--brand-accent) 72%, var(--border));
    color:color-mix(in srgb, var(--brand-accent) 94%, white);
    box-shadow:0 0 16px color-mix(in srgb, var(--brand-accent) 20%, transparent);
  }

  #catalogo,
  .categoria-home[id]{
    scroll-margin-top:calc(var(--public-header-height) + var(--desktop-category-height) + 18px);
  }

  .promo-destacada-pc,
  .promociones-home,
  .cartelera-home,
  .catalogo,
  .categoria-home,
  .info{
    width:min(calc(100% - (var(--public-gutter) * 2)), var(--public-max-width));
    max-width:var(--public-max-width);
    margin-inline:auto;
    box-sizing:border-box;
  }

  .promo-destacada-pc{
    margin-top:var(--public-section-gap);
    margin-bottom:0;
    grid-template-columns:minmax(0, 1.35fr) minmax(280px, .65fr);
    border-color:var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 32px 80px rgba(0,0,0,.34);
  }

  .promo-destacada-pc-imagen{
    height:auto;
    min-width:0;
    min-height:clamp(320px, 28vw, 390px);
    aspect-ratio:16 / 9;
    position:relative;
  }

  .promo-destacada-pc-imagen img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    background:color-mix(in srgb, var(--bg-secondary) 94%, #000);
    transform:none;
  }

  .promo-destacada-pc:hover img{
    transform:none;
  }

  .promo-destacada-pc-imagen picture,
  .promo-card picture{
    display:block;
    width:100%;
    height:100%;
  }

  .promo-destacada-pc-imagen::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, transparent 62%, color-mix(in srgb, var(--surface) 92%, transparent));
    pointer-events:none;
  }

  .promo-destacada-pc-info{
    min-width:0;
    padding:clamp(26px, 4vw, 52px);
  }

  .promo-destacada-pc-info small{
    display:block;
    max-width:100%;
    font-size:clamp(.68rem, .9vw, .75rem);
    line-height:1.3;
    overflow-wrap:anywhere;
  }

  .promo-destacada-pc-info h2{
    max-width:100%;
    margin:clamp(10px, 1.2vw, 14px) 0;
    overflow-wrap:anywhere;
  }

  .promo-destacada-pc-info p{
    max-width:32rem;
    margin-bottom:clamp(20px, 2.2vw, 25px);
    font-size:clamp(.92rem, 1.1vw, 1rem);
    line-height:1.6;
    overflow-wrap:anywhere;
  }

  .promo-destacada-pc-info a{
    max-width:100%;
    min-height:48px;
    padding:clamp(12px, 1.2vw, 15px) clamp(16px, 1.7vw, 22px);
    text-align:center;
    white-space:normal;
  }

  .promo-destacada-pc-info h2,
  .promociones-titulo h2,
  .cartelera-header h2,
  .top-section h2{
    font-size:clamp(2rem, 2.7vw, 2.75rem);
    line-height:1.08;
  }

  .promociones-home,
  .cartelera-home,
  .catalogo,
  .categoria-home,
  .info{
    margin-top:var(--public-section-gap);
    padding:0;
    background:transparent;
  }

  .promo-slider{
    border-radius:var(--radius);
  }

  .promo-track{
    gap:var(--public-card-gap);
    overscroll-behavior-inline:contain;
    scroll-padding-inline:6px;
  }

  .promo-card{
    flex:0 0 clamp(300px, 46%, 480px);
    width:clamp(300px, 46%, 480px);
    min-width:0;
    border-color:var(--border);
    border-radius:var(--radius);
    box-shadow:0 20px 48px rgba(0,0,0,.28);
  }

  .promo-card img{
    height:auto;
    aspect-ratio:16 / 9;
    object-fit:contain;
    object-position:center;
    background:color-mix(in srgb, var(--bg-secondary) 94%, #000);
  }

  .promociones-titulo{
    max-width:100%;
    margin-bottom:clamp(20px, 2.5vw, 28px);
  }

  .promociones-titulo h2{
    max-width:100%;
    overflow-wrap:anywhere;
  }

  .promociones-titulo p{
    max-width:44rem;
    font-size:clamp(.9rem, 1.05vw, .96rem);
    line-height:1.55;
  }

  .promo-card-info{
    min-width:0;
    gap:clamp(10px, 1.4vw, 18px);
    padding:clamp(14px, 1.5vw, 18px) clamp(14px, 1.7vw, 20px);
  }

  .promo-card-info strong{
    min-width:0;
    overflow-wrap:anywhere;
  }

  .promo-card-info span{
    max-width:100%;
    padding:clamp(9px, 1vw, 11px) clamp(12px, 1.25vw, 16px);
    text-align:center;
    white-space:normal;
  }

  .promo-pc-flecha{
    width:clamp(44px, 4vw, 52px);
    height:clamp(44px, 4vw, 52px);
    font-size:clamp(28px, 2.6vw, 34px);
  }

  .promo-pc-anterior{
    left:clamp(8px, 1.5vw, 18px);
  }

  .promo-pc-siguiente{
    right:clamp(8px, 1.5vw, 18px);
  }

  .cartelera-header{
    position:relative;
    margin-bottom:24px;
  }

  .cartelera-carousel-shell{
    position:relative;
    width:100%;
    min-width:0;
    display:block;
  }

  .cartelera-desktop-nav{
    position:absolute;
    top:50%;
    z-index:8;
    width:42px;
    height:42px;
    padding:0;
    display:grid;
    place-items:center;
    transform:translateY(-50%);
    border:1px solid var(--border);
    border-radius:50%;
    background:color-mix(in srgb, var(--bg-primary) 88%, transparent);
    color:var(--text-primary);
    font:800 1.35rem/1 var(--public-font, Inter), sans-serif;
    cursor:pointer;
    box-shadow:0 12px 28px rgba(0,0,0,.4);
    backdrop-filter:blur(12px);
    transition:transform .2s ease, border-color .2s ease, background .2s ease, opacity .2s ease;
  }

  .cartelera-desktop-nav--anterior{
    left:clamp(8px, 1.4vw, 18px);
  }

  .cartelera-desktop-nav--siguiente{
    right:clamp(8px, 1.4vw, 18px);
  }

  .cartelera-desktop-nav:hover{
    transform:translateY(-50%) scale(1.06);
    border-color:var(--brand-primary);
    background:color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
  }

  .cartelera-carousel-shell.is-static .cartelera-desktop-nav{
    display:none;
  }

  .cartelera-header small,
  .top-section small,
  .promociones-titulo small{
    display:block;
    color:var(--brand-accent);
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.16em;
  }

  .cartelera-header h2{
    margin:7px 0 0;
  }

  .cartelera-categorias{
    position:relative;
    display:grid;
    grid-template-columns:34px minmax(0, 1fr) 34px;
    align-items:center;
    gap:8px;
    margin-top:20px;
    overflow:hidden;
  }

  .cartelera-categorias-scroll{
    display:flex;
    gap:11px;
    padding:2px 2px 8px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:none;
    scrollbar-width:none;
    touch-action:pan-y pinch-zoom;
    cursor:grab;
  }

  .cartelera-categorias-scroll::-webkit-scrollbar{
    display:none;
  }

  .cartelera-categorias-scroll.is-dragging{
    cursor:grabbing;
    user-select:none;
  }

  .cartelera-categorias.is-static{
    display:block;
  }

  .cartelera-categorias.is-static .cartelera-categorias-scroll{
    justify-content:center;
    overflow:hidden;
  }

  .cartelera-categorias.is-static .cartelera-categorias-nav{
    display:none;
  }

  .cartelera-categorias-nav{
    position:relative;
    z-index:2;
    width:34px;
    height:34px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    border-radius:50%;
    background:color-mix(in srgb, var(--surface) 90%, transparent);
    color:var(--text-primary);
    font:800 1.15rem/1 var(--public-font, Inter), sans-serif;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.24);
  }

  .cartelera-categorias-nav:hover{
    border-color:var(--brand-primary);
    background:color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
  }

  .categoria-btn{
    min-width:0;
    height:43px;
    padding:0 18px;
    border:1px solid var(--border);
    border-radius:999px;
    background:color-mix(in srgb, var(--surface) 88%, var(--bg-secondary));
    color:var(--text-secondary);
    box-shadow:none;
    opacity:1;
    cursor:pointer;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.015em;
    transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
  }

  .categoria-btn:hover{
    color:var(--text-primary);
    border-color:color-mix(in srgb, var(--brand-primary) 60%, var(--border));
    background:color-mix(in srgb, var(--brand-primary) 10%, var(--surface));
    transform:translateY(-2px);
  }

  .categoria-btn.activa{
    color:#fff;
    border-color:color-mix(in srgb, var(--brand-primary) 70%, white);
    background:linear-gradient(
      135deg,
      var(--brand-primary),
      color-mix(in srgb, var(--brand-primary) 66%, #000)
    );
    transform:none;
    box-shadow:0 8px 22px color-mix(in srgb, var(--brand-primary) 22%, transparent);
  }

  .cartelera-lista{
    display:flex;
    gap:var(--public-card-gap);
    overflow-x:auto;
    padding:14px 8px 28px;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    scrollbar-color:color-mix(in srgb, var(--brand-primary) 55%, var(--border)) transparent;
    scrollbar-width:thin;
  }

  .cartelera-lista.is-static{
    justify-content:center;
  }

  .cartelera-lista.is-dragging{
    scroll-behavior:auto;
    cursor:grabbing;
    user-select:none;
  }

  .cartelera-card{
    flex:0 0 clamp(190px, 16.5vw, 238px);
    min-width:190px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 92%, var(--bg-secondary)),
      color-mix(in srgb, var(--surface) 58%, var(--bg-primary))
    );
    box-shadow:var(--shadow);
    filter:brightness(.88) saturate(.92);
    transform:scale(.985);
    transition:transform .32s ease, filter .32s ease, opacity .32s ease, border-color .32s ease, box-shadow .32s ease;
    scroll-snap-align:start;
  }

  .cartelera-card.is-featured{
    z-index:2;
    filter:brightness(1) saturate(1.04);
    transform:scale(1.04);
    border-color:color-mix(in srgb, var(--brand-accent) 45%, var(--border));
    box-shadow:0 26px 64px rgba(0,0,0,.46), 0 0 36px color-mix(in srgb, var(--brand-accent) 9%, transparent);
  }

  .cartelera-card:hover{
    filter:brightness(1) saturate(1);
    transform:translateY(-5px) scale(1.015);
    border-color:color-mix(in srgb, var(--brand-primary) 55%, var(--border));
    box-shadow:0 24px 54px rgba(0,0,0,.42);
  }

  .cartelera-poster{
    position:relative;
    overflow:hidden;
    aspect-ratio:2 / 3;
    background:var(--bg-secondary);
  }

  .cartelera-poster img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s ease, filter .3s ease;
  }

  .cartelera-card:hover .cartelera-poster img{
    transform:scale(1.04);
    filter:brightness(1.06);
  }

  .cartelera-poster-sombra{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.76), transparent 48%);
    pointer-events:none;
  }

  .cartelera-badges{
    position:absolute;
    top:12px;
    left:12px;
    right:12px;
    z-index:2;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
  }

  .cartelera-badge,
  .cartelera-tipo,
  .cartelera-plataforma{
    display:inline-flex;
    align-items:center;
    width:max-content;
    max-width:100%;
    padding:6px 9px;
    border:1px solid var(--border);
    border-radius:999px;
    background:color-mix(in srgb, var(--bg-primary) 76%, transparent);
    color:var(--text-secondary);
    font-size:.68rem;
    font-weight:800;
    line-height:1;
    backdrop-filter:blur(10px);
  }

  .cartelera-badge.tendencia{
    border-color:color-mix(in srgb, var(--brand-primary) 55%, transparent);
    color:color-mix(in srgb, var(--brand-primary) 48%, white);
  }

  .cartelera-badge.destacado{
    border-color:color-mix(in srgb, var(--brand-accent) 55%, transparent);
    color:color-mix(in srgb, var(--brand-accent) 70%, white);
  }

  .cartelera-ver{
    position:absolute;
    left:14px;
    right:14px;
    bottom:14px;
    z-index:3;
    min-height:42px;
    padding:10px 14px;
    border:1px solid color-mix(in srgb, var(--brand-primary) 58%, white);
    border-radius:calc(var(--radius) * .7);
    background:color-mix(in srgb, var(--brand-primary) 86%, #000);
    color:#fff;
    font-family:inherit;
    font-size:.82rem;
    font-weight:800;
    line-height:1;
    cursor:pointer;
    box-shadow:0 10px 26px color-mix(in srgb, var(--brand-primary) 24%, transparent);
    transition:transform .2s ease, filter .2s ease;
  }

  .cartelera-ver:hover{
    transform:translateY(-2px);
    filter:brightness(1.1);
  }

  .cartelera-info{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:16px;
  }

  .cartelera-info h3{
    margin:0;
    color:var(--text-primary);
    font-size:1.05rem;
    line-height:1.25;
  }

  .cartelera-detalles,
  .cartelera-plataformas{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    color:var(--text-secondary);
    font-size:.78rem;
  }

  .cartelera-detalles span + span::before{
    content:"\00b7";
    margin-right:7px;
    color:var(--brand-accent);
  }

  .cartelera-contador,
  .cartelera-puntos,
  .categoria-home > .catalogo-contador,
  .categoria-home > .catalogo-puntos{
    display:none !important;
  }

  .top-section{
    max-width:none;
    margin-bottom:24px;
    align-items:flex-end;
  }

  .top-section h2{
    color:var(--text-primary);
  }

  #buscador{
    min-height:46px;
    border-color:var(--border);
    background:var(--surface);
    color:var(--text-primary);
  }

  .categoria-grid{
    width:100%;
    max-width:none;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap:var(--public-card-gap);
    margin:0;
    padding:0;
    overflow:visible;
  }

  #productosGrid{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap:var(--public-card-gap);
    overflow:visible;
  }

  .catalogo > .top-section{
    min-width:0;
    display:flex;
    flex-wrap:wrap;
    gap:clamp(16px, 2.4vw, 30px);
  }

  .catalogo > .top-section > div{
    min-width:min(100%, 290px);
    flex:1 1 420px;
  }

  .catalogo > .top-section h2{
    max-width:100%;
    overflow-wrap:break-word;
  }

  #buscador{
    flex:0 1 320px;
    width:clamp(240px, 27vw, 320px);
    max-width:100%;
  }

  #productosGrid .card,
  .categoria-grid .card{
    position:relative;
    min-width:0;
    width:100%;
    max-width:none;
    height:100%;
    margin:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 92%, var(--bg-secondary)),
      color-mix(in srgb, var(--surface) 60%, var(--bg-primary))
    );
    box-shadow:var(--shadow);
    opacity:1;
    filter:none;
    transform:none;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }

  #productosGrid .card > *{
    min-width:0;
  }

  .categoria-grid .card > *{
    min-width:0;
  }

  #productosGrid .card:hover,
  .categoria-grid .card:hover{
    transform:translateY(-6px);
    border-color:var(--catalogo-color, var(--brand-primary));
    box-shadow:0 24px 54px rgba(0,0,0,.42);
  }

  #productosGrid .cover,
  .categoria-grid .cover{
    position:relative;
    height:auto;
    aspect-ratio:16 / 10;
    overflow:hidden;
    padding:0;
    background:var(--bg-secondary);
  }

  #productosGrid .cover-img,
  .categoria-grid .cover-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform .4s ease, filter .3s ease;
  }

  #productosGrid .card:hover .cover-img,
  .categoria-grid .card:hover .cover-img{
    transform:scale(1.025);
  }

  #productosGrid .cover-overlay,
  .categoria-grid .cover-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.9), transparent 68%);
  }

  #productosGrid .cover-overlay h3,
  .categoria-grid .cover-overlay h3{
    position:absolute;
    left:16px;
    right:16px;
    bottom:14px;
    margin:0;
    color:#fff;
    font-size:clamp(1.2rem, 1.6vw, 1.6rem);
    line-height:1.08;
  }

  #productosGrid .cover-overlay h3{
    display:-webkit-box;
    overflow:hidden;
    overflow-wrap:anywhere;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  .categoria-grid .cover-overlay h3{
    display:-webkit-box;
    overflow:hidden;
    overflow-wrap:anywhere;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  #productosGrid .plans,
  .categoria-grid .plans{
    flex:1;
    padding:15px 16px 8px;
  }

  #productosGrid .plan,
  .categoria-grid .plan{
    min-height:42px;
    padding:9px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid var(--border);
    color:var(--text-secondary);
    font-size:.83rem;
  }

  #productosGrid .plan:last-child,
  .categoria-grid .plan:last-child{
    border-bottom:0;
  }

  #productosGrid .plan strong,
  .categoria-grid .plan strong{
    flex-shrink:0;
    color:var(--catalogo-color, var(--brand-primary));
    text-align:right;
  }

  #productosGrid .plan > span{
    min-width:0;
    overflow-wrap:anywhere;
  }

  #productosGrid .plan > strong,
  #productosGrid .plan > div,
  #productosGrid .precio-configurable{
    max-width:100%;
    white-space:nowrap;
  }

  .categoria-grid .plan > span{
    min-width:0;
    overflow-wrap:anywhere;
  }

  .categoria-grid .plan > strong,
  .categoria-grid .plan > div,
  .categoria-grid .precio-configurable{
    max-width:100%;
    white-space:nowrap;
  }

  #productosGrid .buy,
  .categoria-grid .buy{
    width:calc(100% - 32px);
    min-height:46px;
    margin:8px 16px 16px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid color-mix(in srgb, var(--catalogo-color, var(--brand-primary)) 55%, white);
    border-radius:calc(var(--radius) * .72);
    background:linear-gradient(
      135deg,
      var(--catalogo-color, var(--brand-primary)),
      color-mix(in srgb, var(--catalogo-color, var(--brand-primary)) 70%, #000)
    ) !important;
    color:#fff !important;
    text-align:center;
    text-decoration:none;
    font-size:.86rem;
    font-weight:900;
  }

  #productosGrid .card:has(.agotado-ribbon),
  .categoria-grid .card:has(.agotado-ribbon){
    opacity:.82;
    border-color:color-mix(in srgb, var(--text-secondary) 32%, var(--border));
  }

  #productosGrid .card:has(.agotado-ribbon) .cover-img,
  .categoria-grid .card:has(.agotado-ribbon) .cover-img{
    filter:grayscale(.7) brightness(.58);
  }

  #productosGrid .buy-agotado,
  .categoria-grid .buy-agotado{
    border-color:var(--border);
    background:color-mix(in srgb, var(--surface) 78%, var(--bg-secondary)) !important;
    color:var(--text-primary) !important;
    box-shadow:none !important;
  }

  .badge-oferta,
  .badge-destacado,
  .agotado-ribbon{
    max-width:calc(100% - 24px);
    letter-spacing:.045em;
    box-shadow:0 8px 24px rgba(0,0,0,.3);
  }

  .categoria-home{
    min-width:0;
    padding:clamp(26px, 3vw, 40px);
    border:1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius:calc(var(--radius) * 1.2);
    background:radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--categoria-color, var(--brand-primary)) 8%, transparent),
      transparent 34%
    ), color-mix(in srgb, var(--surface) 50%, var(--bg-primary));
  }

  .categoria-home--editorial{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(280px, clamp(300px, 31vw, 430px));
    grid-template-areas:"heading visual" "products visual";
    gap:clamp(18px, 2vw, 24px) clamp(22px, 3vw, 46px);
    overflow:hidden;
  }

  .categoria-home--editorial .categoria-encabezado{
    grid-area:heading;
    margin-bottom:0;
  }

  .categoria-home--editorial .categoria-grid{
    grid-area:products;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    min-width:0;
    align-self:start;
  }

  .categoria-home--editorial .categoria-grid:has(.card:only-child){
    grid-template-columns:minmax(260px, 420px);
  }

  .categoria-editorial-visual{
    grid-area:visual;
    position:relative;
    min-width:0;
    min-height:100%;
    overflow:hidden;
    border-radius:calc(var(--radius) * 1.05);
    background:var(--bg-secondary);
    box-shadow:0 28px 70px rgba(0,0,0,.34);
  }

  .categoria-editorial-visual img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:blur(2px) brightness(.58) saturate(1.15);
    transform:scale(1.04);
  }

  .categoria-editorial-visual__overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:clamp(28px, 3vw, 46px);
    background:linear-gradient(180deg, color-mix(in srgb, var(--categoria-color, var(--brand-primary)) 8%, transparent), rgba(0,0,0,.9));
  }

  .categoria-editorial-visual__overlay small{
    color:var(--brand-accent);
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.16em;
  }

  .categoria-editorial-visual__overlay strong{
    max-width:100%;
    margin-top:8px;
    color:#fff;
    font-size:clamp(2rem, 3vw, 3.4rem);
    line-height:1;
    overflow-wrap:anywhere;
  }

  .categoria-editorial-visual__overlay span{
    margin-top:12px;
    color:rgba(255,255,255,.68);
  }

  .categoria-encabezado{
    min-width:0;
    flex-wrap:wrap;
    gap:clamp(14px, 2vw, 24px);
  }

  .categoria-info{
    min-width:min(100%, 240px);
    flex:1 1 360px;
  }

  .categoria-info h2{
    max-width:100%;
    font-size:clamp(1.75rem, 2.7vw, 2.75rem);
    overflow-wrap:anywhere;
  }

  .categoria-info p{
    max-width:620px;
    margin:9px 0 0;
    color:var(--text-secondary);
    line-height:1.55;
  }

  .categoria-ver-todo{
    flex:0 0 auto;
    max-width:100%;
    min-height:42px;
    padding:10px 16px;
    border:1px solid var(--border);
    border-radius:calc(var(--radius) * .7);
    background:color-mix(in srgb, var(--surface) 86%, var(--bg-secondary));
    color:var(--text-primary);
    font-family:inherit;
    font-size:.83rem;
    font-weight:800;
    line-height:1;
    cursor:pointer;
    transition:transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
  }

  .categoria-ver-todo:hover{
    transform:translateY(-2px);
    border-color:var(--categoria-color, var(--brand-primary));
    background:color-mix(in srgb, var(--categoria-color, var(--brand-primary)) 10%, var(--surface));
    color:color-mix(in srgb, var(--categoria-color, var(--brand-primary)) 62%, white);
  }

  .info{
    grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr);
    gap:0;
    overflow:hidden;
    border:1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius:var(--radius);
    background:linear-gradient(110deg, color-mix(in srgb, var(--surface) 86%, var(--bg-primary)), color-mix(in srgb, var(--brand-primary) 5%, var(--surface)));
    box-shadow:0 26px 70px rgba(0,0,0,.25);
  }

  .info > div{
    border:0;
    border-radius:0;
    background:transparent;
  }

  .info > div + div{
    border-left:1px solid var(--border);
  }

  .info-grid p,
  .payments span{
    border-color:color-mix(in srgb, var(--border) 76%, transparent);
    background:color-mix(in srgb, var(--bg-secondary) 48%, transparent);
  }

  footer{
    margin-top:var(--public-section-gap);
    padding:28px max(
      var(--public-gutter),
      calc((100vw - var(--public-max-width)) / 2 + var(--public-gutter))
    );
    border-top-color:var(--border);
    background:var(--bg-secondary);
  }

  footer a{
    max-width:320px;
    overflow:hidden;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text-primary);
    text-overflow:ellipsis;
    white-space:nowrap;
    box-shadow:none;
  }

  .float-wa{
    width:56px;
    height:56px;
    right:max(22px, calc((100vw - var(--public-max-width)) / 2 + 18px));
    bottom:22px;
  }
}

@media (min-width:769px) and (max-width:1199px){
  :root{
    --public-gutter:clamp(18px, 3vw, 36px);
    --public-section-gap:clamp(38px, 4.5vw, 54px);
    --public-card-gap:clamp(14px, 1.8vw, 20px);
    --public-nav-gap:clamp(6px, 1vw, 12px);
  }

  .cartelera-home{
    --cartelera-compact-card-width:clamp(
      160px,
      min(
        18vw,
        calc(
          (
            100dvh
            - var(--public-header-height)
            - var(--desktop-category-height)
            - 120px
          ) / 2
        )
      ),
      198px
    );
  }

  .cartelera-home > .cartelera-header{
    width:100%;
    min-width:0;
    max-width:100%;
    margin-bottom:clamp(14px, 2.5dvh, 20px);
  }

  .cartelera-header small{
    font-size:clamp(.64rem, .95vw, .7rem);
    letter-spacing:clamp(.12em, .17vw, .16em);
  }

  .cartelera-header h2{
    font-size:clamp(1.7rem, 3vw, 2.3rem);
  }

  .cartelera-categorias{
    width:100%;
    min-width:0;
    max-width:100%;
    grid-template-columns:34px minmax(0, 1fr) 34px;
    margin-top:clamp(10px, 2dvh, 16px);
  }

  .cartelera-categorias-scroll{
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    gap:clamp(7px, 1vw, 10px);
    padding:2px 2px clamp(5px, 1dvh, 8px);
  }

  .categoria-btn{
    height:clamp(36px, 5.5dvh, 42px);
    padding-inline:clamp(12px, 1.5vw, 17px);
    font-size:clamp(.74rem, 1vw, .8rem);
  }

  .cartelera-lista{
    gap:clamp(10px, 1.5vw, 18px);
    padding:clamp(7px, 1.2dvh, 11px) 6px clamp(14px, 2.5dvh, 22px);
  }

  .cartelera-card{
    flex-basis:var(--cartelera-compact-card-width);
    min-width:var(--cartelera-compact-card-width);
  }

  .cartelera-badges{
    top:clamp(8px, 1.2vw, 11px);
    left:clamp(8px, 1.2vw, 11px);
    right:clamp(8px, 1.2vw, 11px);
    gap:5px;
  }

  .cartelera-badge,
  .cartelera-tipo,
  .cartelera-plataforma{
    padding:clamp(4px, .6vw, 6px) clamp(6px, .8vw, 9px);
    font-size:clamp(.6rem, .8vw, .68rem);
  }

  .cartelera-ver{
    left:clamp(9px, 1.2vw, 13px);
    right:clamp(9px, 1.2vw, 13px);
    bottom:clamp(9px, 1.2vw, 13px);
    min-height:clamp(36px, 5dvh, 41px);
    padding:clamp(8px, 1vw, 10px) clamp(10px, 1.3vw, 14px);
    font-size:clamp(.72rem, .95vw, .8rem);
  }

  .cartelera-info{
    gap:clamp(6px, 1dvh, 9px);
    padding:clamp(10px, 1.35vw, 14px);
  }

  .cartelera-info h3{
    font-size:clamp(.9rem, 1.35vw, 1rem);
  }

  .cartelera-detalles,
  .cartelera-plataformas{
    gap:clamp(5px, .7vw, 7px);
    font-size:clamp(.68rem, .9vw, .76rem);
  }

  .cartelera-desktop-nav{
    width:clamp(36px, 4.5vw, 41px);
    height:clamp(36px, 4.5vw, 41px);
    font-size:clamp(1.15rem, 2vw, 1.3rem);
  }

  .nav{
    padding-block:clamp(8px, 1.2vw, 12px);
  }

  .brand{
    gap:clamp(7px, 1vw, 12px);
  }

  .brand span{
    max-width:clamp(150px, 25vw, 280px);
    font-size:clamp(.88rem, 1.45vw, 1.05rem);
  }

  .links a{
    min-height:clamp(36px, 4.2vw, 42px);
    padding-inline:clamp(7px, 1vw, 12px);
    font-size:clamp(.76rem, 1.25vw, .88rem);
  }

  .hero-pc-v2{
    padding-top:clamp(32px, 4.2vw, 50px);
  }

  .hero-pc-texto h1{
    max-width:100%;
    margin:clamp(13px, 1.8vw, 18px) 0;
    font-size:clamp(2rem, 4.3vw, 3.2rem);
    line-height:1;
    overflow-wrap:normal;
  }

  .hero-pc-texto p{
    max-width:38rem;
    font-size:clamp(.92rem, 1.45vw, 1.05rem);
    line-height:1.55;
  }

  .hero-pc-botones{
    margin-top:clamp(20px, 2.6vw, 28px);
    gap:clamp(9px, 1.2vw, 12px);
  }

  .hero-pc-catalogo,
  .hero-pc-whatsapp{
    min-width:clamp(168px, 17vw, 190px);
    min-height:clamp(46px, 4.5vw, 50px);
    padding:clamp(12px, 1.25vw, 14px) clamp(15px, 1.65vw, 20px);
    font-size:clamp(.82rem, 1.15vw, .94rem);
    white-space:nowrap;
  }

  .hero-pc-plataformas{
    gap:clamp(10px, 1.35vw, 16px);
  }

  .hero-pc-beneficios{
    margin-top:clamp(26px, 3.5vw, 42px);
  }

  .hero-beneficio-item{
    min-width:0;
    min-height:clamp(76px, 8vw, 88px);
    padding:clamp(14px, 1.8vw, 18px) clamp(13px, 1.8vw, 20px);
  }

  .catalogo > .top-section{
    margin-bottom:clamp(18px, 2.5vw, 24px);
    align-items:flex-end;
  }

  .catalogo > .top-section h2{
    font-size:clamp(1.65rem, 3.2vw, 2.25rem);
  }

  #buscador{
    min-height:clamp(44px, 4.5vw, 46px);
    padding:clamp(12px, 1.4vw, 15px) clamp(14px, 1.6vw, 17px);
    font-size:clamp(.88rem, 1.25vw, 1rem);
  }

  #productosGrid .plans{
    padding:clamp(12px, 1.6vw, 15px) clamp(13px, 1.7vw, 16px) 8px;
  }

  #productosGrid .plan{
    gap:clamp(8px, 1.2vw, 12px);
    font-size:clamp(.78rem, 1.1vw, .83rem);
  }

  #productosGrid .buy{
    width:calc(100% - clamp(26px, 3.4vw, 32px));
    margin:8px clamp(13px, 1.7vw, 16px) clamp(13px, 1.7vw, 16px);
    padding:clamp(11px, 1.3vw, 12px) clamp(12px, 1.5vw, 14px);
  }
}

@media (min-width:769px) and (max-width:1099px){
  .hero-pc-contenido{
    grid-template-columns:minmax(0, 1fr) minmax(280px, .82fr);
    gap:clamp(20px, 3vw, 32px);
  }

  .hero-pc-beneficios{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .hero-beneficio-item:nth-child(2){
    border-right:0;
  }

  .hero-beneficio-item:nth-child(-n + 2){
    border-bottom:1px solid var(--border);
  }

  .promo-destacada-pc{
    grid-template-columns:1fr;
  }

  .promo-destacada-pc-imagen{
    min-height:0;
    aspect-ratio:16 / 7;
  }

  .promo-destacada-pc-imagen::after{
    background:linear-gradient(180deg, transparent 68%, color-mix(in srgb, var(--surface) 90%, transparent));
  }

  .promo-destacada-pc-info{
    padding:clamp(24px, 4.2vw, 40px);
  }

  .promo-destacada-pc-info h2,
  .promociones-titulo h2{
    font-size:clamp(1.7rem, 3.4vw, 2.3rem);
  }

  .promo-card-info{
    flex-wrap:wrap;
  }

  .promo-card-info strong{
    flex:1 1 150px;
  }

  .promo-card-info span{
    flex:0 1 auto;
  }

  .categoria-home--editorial{
    grid-template-columns:1fr;
    grid-template-areas:"heading" "products" "visual";
  }

  .categoria-editorial-visual{
    min-height:clamp(220px, 34vw, 340px);
    aspect-ratio:16 / 6;
  }

  .categoria-editorial-visual__overlay{
    padding:clamp(22px, 4vw, 36px);
  }

  .categoria-editorial-visual__overlay strong{
    font-size:clamp(1.8rem, 5vw, 3rem);
  }

  .categoria-grid .plans{
    padding:clamp(12px, 1.6vw, 15px) clamp(13px, 1.7vw, 16px) 8px;
  }

  .categoria-grid .plan{
    gap:clamp(8px, 1.2vw, 12px);
    font-size:clamp(.78rem, 1.1vw, .83rem);
  }

  .categoria-grid .buy{
    width:calc(100% - clamp(26px, 3.4vw, 32px));
    margin:8px clamp(13px, 1.7vw, 16px) clamp(13px, 1.7vw, 16px);
    padding:clamp(11px, 1.3vw, 12px) clamp(12px, 1.5vw, 14px);
  }
}

/* Cartelera Desktop: ajuste adicional cuando la altura útil es reducida. */
@media (min-width:769px) and (max-height:899px){
  .cartelera-home{
    --cartelera-height-card-width:clamp(
      145px,
      calc(
        (
          100dvh
          - var(--public-header-height)
          - var(--desktop-category-height)
        ) / 3
      ),
      238px
    );
  }

  .cartelera-home > .cartelera-header{
    margin-bottom:clamp(12px, 2dvh, 20px);
  }

  .cartelera-header small{
    font-size:clamp(.62rem, 1.5dvh, .7rem);
  }

  .cartelera-header h2{
    font-size:clamp(1.75rem, 4dvh, 2.35rem);
  }

  .cartelera-categorias{
    margin-top:clamp(8px, 1.8dvh, 16px);
  }

  .cartelera-categorias-scroll{
    gap:clamp(7px, 1.2dvh, 10px);
    padding-bottom:clamp(4px, 1dvh, 8px);
  }

  .categoria-btn{
    height:clamp(34px, 5dvh, 42px);
    padding-inline:clamp(11px, 2.2dvh, 17px);
    font-size:clamp(.72rem, 1.7dvh, .8rem);
  }

  .cartelera-lista{
    gap:clamp(10px, 2dvh, 18px);
    padding-top:clamp(6px, 1.2dvh, 11px);
    padding-bottom:clamp(12px, 2.4dvh, 22px);
  }

  .cartelera-card{
    flex-basis:min(
      var(--cartelera-compact-card-width, clamp(190px, 16.5vw, 238px)),
      var(--cartelera-height-card-width)
    );
    min-width:min(
      var(--cartelera-compact-card-width, clamp(190px, 16.5vw, 238px)),
      var(--cartelera-height-card-width)
    );
  }

  .cartelera-badges{
    top:clamp(7px, 1.4dvh, 11px);
    left:clamp(7px, 1.4dvh, 11px);
    right:clamp(7px, 1.4dvh, 11px);
    gap:clamp(4px, .8dvh, 6px);
  }

  .cartelera-badge,
  .cartelera-tipo,
  .cartelera-plataforma{
    padding:clamp(4px, .8dvh, 6px) clamp(6px, 1.2dvh, 9px);
    font-size:clamp(.58rem, 1.35dvh, .68rem);
  }

  .cartelera-ver{
    left:clamp(8px, 1.6dvh, 13px);
    right:clamp(8px, 1.6dvh, 13px);
    bottom:clamp(8px, 1.6dvh, 13px);
    min-height:clamp(34px, 5dvh, 41px);
    padding:clamp(7px, 1.2dvh, 10px) clamp(9px, 1.8dvh, 14px);
    font-size:clamp(.7rem, 1.6dvh, .8rem);
  }

  .cartelera-info{
    gap:clamp(5px, 1.2dvh, 9px);
    padding:clamp(8px, 1.7dvh, 14px);
  }

  .cartelera-info h3{
    font-size:clamp(.85rem, 1.8dvh, 1rem);
    line-height:1.18;
  }

  .cartelera-detalles,
  .cartelera-plataformas{
    gap:clamp(4px, .9dvh, 7px);
    font-size:clamp(.64rem, 1.5dvh, .76rem);
  }

  .cartelera-desktop-nav{
    width:clamp(34px, 5dvh, 41px);
    height:clamp(34px, 5dvh, 41px);
    font-size:clamp(1.1rem, 2.8dvh, 1.3rem);
  }
}

/* =====================================
   FASE 9.2 - CATÁLOGO PREMIUM DESKTOP
   Aislado del catálogo por categorías.
===================================== */

@media (min-width:769px){
  .catalogo{
    position:relative;
    isolation:isolate;
    overflow:visible;
    border-block:1px solid color-mix(in srgb, var(--brand-accent) 16%, transparent);
    background:transparent;
  }

  .catalogo::before{
    content:none;
  }

  .catalogo > .top-section small{
    display:inline-flex;
    align-items:center;
    gap:9px;
  }

  .catalogo > .top-section small::before{
    content:"";
    width:24px;
    height:1px;
    background:currentColor;
    box-shadow:0 0 12px currentColor;
  }

  #productosGrid{
    align-items:stretch;
    perspective:1200px;
  }

  #productosGrid .card{
    --catalogo-float-duration:7.2s;
    --catalogo-float-delay:-1.4s;
    isolation:isolate;
    border-color:color-mix(in srgb, var(--brand-accent) 13%, var(--border));
    border-radius:calc(var(--radius) * 1.15);
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, white 1%), color-mix(in srgb, var(--surface) 68%, var(--bg-primary)));
    box-shadow:0 22px 54px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.035);
    transform:translateZ(0);
    transition:transform .48s cubic-bezier(.2,.75,.2,1), border-color .4s ease, box-shadow .48s ease;
    animation:catalogo-card-flotante var(--catalogo-float-duration) cubic-bezier(.45,.05,.55,.95) var(--catalogo-float-delay) infinite alternate;
    will-change:translate;
  }

  #productosGrid .card:nth-child(3n + 2){
    --catalogo-float-duration:8.1s;
    --catalogo-float-delay:-4.7s;
  }

  #productosGrid .card:nth-child(3n){
    --catalogo-float-duration:6.7s;
    --catalogo-float-delay:-6.2s;
  }

  #productosGrid .card::after{
    content:"";
    position:absolute;
    z-index:5;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(115deg, transparent 25%, rgba(255,255,255,.055) 48%, transparent 68%);
    opacity:.35;
    transform:translate3d(-65%,0,0);
    pointer-events:none;
    transition:opacity .4s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  }

  #productosGrid .card:hover{
    transform:translate3d(0,-5px,16px) scale(1.008);
    border-color:color-mix(in srgb, var(--catalogo-color, var(--brand-accent)) 56%, var(--brand-accent));
    box-shadow:0 30px 72px rgba(0,0,0,.44), 0 0 30px color-mix(in srgb, var(--catalogo-color, var(--brand-primary)) 10%, transparent), inset 0 1px rgba(255,255,255,.055);
  }

  #productosGrid .card:hover::after{
    opacity:.72;
    transform:translate3d(65%,0,0);
  }

  #productosGrid .cover{
    isolation:isolate;
    aspect-ratio:16 / 9;
    background:color-mix(in srgb, var(--surface) 70%, #000);
  }

  #productosGrid .cover-img{
    opacity:1;
    filter:none;
    transform:scale(1.015) translate3d(0,0,0);
    transform-origin:center;
    animation:catalogo-premium-respiro 12s ease-in-out infinite alternate;
    transition:transform .85s cubic-bezier(.2,.7,.2,1), filter .55s ease;
  }

  #productosGrid .card:nth-child(even) .cover-img{
    animation-direction:alternate-reverse;
    animation-duration:14s;
  }

  #productosGrid .card:hover .cover-img{
    filter:saturate(1.04) brightness(1.035);
    transform:scale(1.075) translate3d(0,-1.2%,0);
    animation-play-state:paused;
  }

  #productosGrid .cover-overlay{
    z-index:2;
    background:
      linear-gradient(to top, rgba(3,5,9,.86) 0%, rgba(3,5,9,.38) 31%, transparent 64%),
      linear-gradient(to right, rgba(3,5,9,.12), transparent 48%);
    pointer-events:none;
  }

  #productosGrid .cover-overlay h3{
    text-shadow:0 2px 18px rgba(0,0,0,.82);
  }

  #productosGrid .plans,
  #productosGrid .buy{
    position:relative;
    z-index:8;
  }

  #productosGrid .plans{
    flex:0 0 auto;
    min-height:124px;
    display:grid;
    align-content:center;
    grid-auto-rows:minmax(48px, auto);
  }

  #productosGrid .plan{
    height:100%;
  }

  #productosGrid .plan:has(.plan-precio-promocional){
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-rows:auto auto;
    column-gap:12px;
    align-content:center;
  }

  #productosGrid .plan-precio-anterior{
    grid-column:2;
    grid-row:1;
    color:color-mix(in srgb, var(--text-secondary) 72%, transparent) !important;
    font-size:.68rem !important;
    font-weight:650;
    letter-spacing:.015em;
    text-decoration:none !important;
    line-height:1.05;
  }

  #productosGrid .plan-precio-anterior::before{
    content:"Antes ";
  }

  #productosGrid .plan-precio-anterior > .precio-configurable{
    text-decoration:line-through;
    text-decoration-thickness:1px;
  }

  #productosGrid .plan-precio-promocional{
    grid-column:2;
    grid-row:2;
    color:color-mix(in srgb, var(--brand-accent) 88%, white) !important;
    font-size:0;
    line-height:1.1;
  }

  #productosGrid .plan-precio-promocional > .precio-configurable{
    font-size:1rem;
  }

  #productosGrid .plan:has(.plan-precio-promocional) > span:first-child{
    grid-column:1;
    grid-row:1 / 3;
    align-self:center;
  }

  #productosGrid .badge-destacado,
  #productosGrid .badge-oferta,
  #productosGrid .agotado-ribbon{
    position:absolute;
    z-index:8;
  }

  #productosGrid .badge-oferta{
    top:14px;
    left:14px;
    right:auto;
    width:max-content;
    max-width:calc(100% - 28px);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 13px;
    border:1px solid color-mix(in srgb, var(--catalogo-color) 58%, white);
    border-radius:999px;
    white-space:nowrap;
    line-height:1;
    box-shadow:0 8px 22px color-mix(in srgb, var(--catalogo-color) 32%, transparent);
  }

  #productosGrid .card:has(.agotado-ribbon){
    opacity:.94;
  }

  #productosGrid .card:has(.agotado-ribbon) .cover-img{
    filter:grayscale(.28) brightness(.78) contrast(.96);
  }

  #productosGrid .card:has(.agotado-ribbon):hover .cover-img{
    filter:grayscale(.18) brightness(.84) contrast(.98);
  }

  #productosGrid .buy{
    box-sizing:border-box;
    flex:0 0 56px;
    min-height:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:auto;
    line-height:1.15;
    text-align:center;
    transition:transform .25s ease, filter .25s ease, box-shadow .3s ease;
  }

  #productosGrid .buy:hover{
    transform:translateY(-2px);
    filter:brightness(1.07);
  }

  @keyframes catalogo-premium-respiro{
    0%{ transform:scale(1.015) translate3d(-.35%,0,0); }
    100%{ transform:scale(1.035) translate3d(.35%,-.45%,0); }
  }

  @keyframes catalogo-card-flotante{
    0%{ translate:-2px 3px; }
    100%{ translate:2px -9px; }
  }
}

@media (min-width:769px) and (prefers-reduced-motion:reduce){
  .hero-pc-fondo::after{
    animation:none !important;
  }

  #productosGrid .card,
  #productosGrid .card::after,
  #productosGrid .cover-img,
  #productosGrid .buy{
    animation:none !important;
    transition-duration:.01ms !important;
    translate:none !important;
    will-change:auto;
  }
}

/* =====================================
   HERO DESKTOP - CIRCUITO AMBIENTAL
===================================== */

@media (min-width:769px){
  .hero-pc-fondo{
    overflow:hidden;
    pointer-events:none;
  }

  .hero-pc-fondo::before,
  .hero-pc-fondo::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
  }

  .hero-pc-fondo::before{
    color:var(--hero-color, var(--pechy-principal));
    background-color:currentColor;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 760' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke-width='.9'%3E%3Cpath d='M24 84h124l18 18h132l18-18h226l32 32h150' stroke-opacity='.3'/%3E%3Cpath d='M972 76h118l18 18h94l22-22h166l24 24h142' stroke-opacity='.26'/%3E%3Cpath d='M18 184h112l18-18h118l16 16h92l18-18h112' stroke-opacity='.24'/%3E%3Cpath d='M1094 188h86l17-17h98l19 19h104l18-18h136' stroke-opacity='.28'/%3E%3Cpath d='M28 419h92l21 21h111l18-18h82l17 17h105' stroke-opacity='.23'/%3E%3Cpath d='M1178 432h80l17-17h92l18 18h78l17-17h94' stroke-opacity='.25'/%3E%3Cpath d='M76 704h152l18-18h84l16-16h158' stroke-opacity='.3'/%3E%3Cpath d='M1068 698h112l20-20h104l17-17h126l22 22h93' stroke-opacity='.26'/%3E%3C/g%3E%3Cg stroke-width='1.25'%3E%3Cpath d='M42 246h188l22-22h96l18-18h132l28 28h84l22 22h188l24-24h91l18-18h146l26 26h168M590 256v42l18 18h54M915 214v-31l17-17h61' stroke-opacity='.62'/%3E%3Cpath d='M38 548h126l20-20h94l18-18h164l24 24h76l20 20h172l28-28h82l22-22h177l28 28h147M752 554v38l19 19h63M1061 504v-34l18-18h58' stroke-opacity='.57'/%3E%3Cpath d='M346 326h96l18-18h62l18-18h166l20 20h72l18 18h108l22-22h74l20-20h164M706 290v-32l17-17h48' stroke-opacity='.48'/%3E%3Cpath d='M686 637h98l17-17h70l18-18h140l18 18h62l17 17h182M1029 602v-32l16-16h52' stroke-opacity='.44'/%3E%3C/g%3E%3Cg stroke-width='1.65'%3E%3Cpath d='M34 354h104l24-24h64l26-26h194l20 20h74l18 18h278l26-26h76l30-30h190l24 24h83l20 20h156M816 342v39l20 20h72' stroke-opacity='.72'/%3E%3Cpath d='M52 468h176l24-24h92l22-22h194l28 28h88l24 24h242l22-22h98l22-22h174l30 30h76l30 30h164M920 474v42l22 22h66' stroke-opacity='.58'/%3E%3Cpath d='M236 132h116l18 18h72l18 18h230l22-22h62l24-24h186l18 18h86l18 18h222M690 168v34l18 18h70' stroke-opacity='.5'/%3E%3C/g%3E%3C/g%3E%3Cg fill='white'%3E%3Ccircle cx='166' cy='102' r='2' fill-opacity='.52'/%3E%3Ccircle cx='316' cy='84' r='2.4' fill-opacity='.58'/%3E%3Ccircle cx='1108' cy='94' r='2.1' fill-opacity='.48'/%3E%3Ccircle cx='1414' cy='96' r='1.8' fill-opacity='.42'/%3E%3Ccircle cx='366' cy='206' r='2.6' fill-opacity='.72'/%3E%3Ccircle cx='612' cy='256' r='2.1' fill-opacity='.58'/%3E%3Ccircle cx='933' cy='214' r='2.8' fill-opacity='.74'/%3E%3Ccircle cx='1205' cy='240' r='2.2' fill-opacity='.6'/%3E%3Ccircle cx='252' cy='304' r='2.4' fill-opacity='.67'/%3E%3Ccircle cx='538' cy='342' r='3.1' fill-opacity='.86'/%3E%3Ccircle cx='948' cy='286' r='2.7' fill-opacity='.8'/%3E%3Ccircle cx='1265' cy='330' r='2.3' fill-opacity='.66'/%3E%3Ccircle cx='366' cy='422' r='2.5' fill-opacity='.7'/%3E%3Ccircle cx='700' cy='474' r='3' fill-opacity='.82'/%3E%3Ccircle cx='1042' cy='430' r='2.4' fill-opacity='.66'/%3E%3Ccircle cx='1360' cy='460' r='2.8' fill-opacity='.74'/%3E%3Ccircle cx='296' cy='510' r='2.2' fill-opacity='.58'/%3E%3Ccircle cx='580' cy='554' r='2.7' fill-opacity='.7'/%3E%3Ccircle cx='884' cy='504' r='3.2' fill-opacity='.86'/%3E%3Ccircle cx='1089' cy='532' r='2.5' fill-opacity='.68'/%3E%3Ccircle cx='346' cy='670' r='2.1' fill-opacity='.5'/%3E%3Ccircle cx='889' cy='602' r='2.6' fill-opacity='.64'/%3E%3Ccircle cx='1321' cy='661' r='2.2' fill-opacity='.52'/%3E%3C/g%3E%3Cg fill='white'%3E%3Ccircle cx='538' cy='342' r='6' fill-opacity='.1'/%3E%3Ccircle cx='948' cy='286' r='5.5' fill-opacity='.12'/%3E%3Ccircle cx='700' cy='474' r='5.8' fill-opacity='.11'/%3E%3Ccircle cx='884' cy='504' r='6.2' fill-opacity='.12'/%3E%3C/g%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 760' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke-width='.9'%3E%3Cpath d='M24 84h124l18 18h132l18-18h226l32 32h150' stroke-opacity='.3'/%3E%3Cpath d='M972 76h118l18 18h94l22-22h166l24 24h142' stroke-opacity='.26'/%3E%3Cpath d='M18 184h112l18-18h118l16 16h92l18-18h112' stroke-opacity='.24'/%3E%3Cpath d='M1094 188h86l17-17h98l19 19h104l18-18h136' stroke-opacity='.28'/%3E%3Cpath d='M28 419h92l21 21h111l18-18h82l17 17h105' stroke-opacity='.23'/%3E%3Cpath d='M1178 432h80l17-17h92l18 18h78l17-17h94' stroke-opacity='.25'/%3E%3Cpath d='M76 704h152l18-18h84l16-16h158' stroke-opacity='.3'/%3E%3Cpath d='M1068 698h112l20-20h104l17-17h126l22 22h93' stroke-opacity='.26'/%3E%3C/g%3E%3Cg stroke-width='1.25'%3E%3Cpath d='M42 246h188l22-22h96l18-18h132l28 28h84l22 22h188l24-24h91l18-18h146l26 26h168M590 256v42l18 18h54M915 214v-31l17-17h61' stroke-opacity='.62'/%3E%3Cpath d='M38 548h126l20-20h94l18-18h164l24 24h76l20 20h172l28-28h82l22-22h177l28 28h147M752 554v38l19 19h63M1061 504v-34l18-18h58' stroke-opacity='.57'/%3E%3Cpath d='M346 326h96l18-18h62l18-18h166l20 20h72l18 18h108l22-22h74l20-20h164M706 290v-32l17-17h48' stroke-opacity='.48'/%3E%3Cpath d='M686 637h98l17-17h70l18-18h140l18 18h62l17 17h182M1029 602v-32l16-16h52' stroke-opacity='.44'/%3E%3C/g%3E%3Cg stroke-width='1.65'%3E%3Cpath d='M34 354h104l24-24h64l26-26h194l20 20h74l18 18h278l26-26h76l30-30h190l24 24h83l20 20h156M816 342v39l20 20h72' stroke-opacity='.72'/%3E%3Cpath d='M52 468h176l24-24h92l22-22h194l28 28h88l24 24h242l22-22h98l22-22h174l30 30h76l30 30h164M920 474v42l22 22h66' stroke-opacity='.58'/%3E%3Cpath d='M236 132h116l18 18h72l18 18h230l22-22h62l24-24h186l18 18h86l18 18h222M690 168v34l18 18h70' stroke-opacity='.5'/%3E%3C/g%3E%3C/g%3E%3Cg fill='white'%3E%3Ccircle cx='166' cy='102' r='2' fill-opacity='.52'/%3E%3Ccircle cx='316' cy='84' r='2.4' fill-opacity='.58'/%3E%3Ccircle cx='1108' cy='94' r='2.1' fill-opacity='.48'/%3E%3Ccircle cx='1414' cy='96' r='1.8' fill-opacity='.42'/%3E%3Ccircle cx='366' cy='206' r='2.6' fill-opacity='.72'/%3E%3Ccircle cx='612' cy='256' r='2.1' fill-opacity='.58'/%3E%3Ccircle cx='933' cy='214' r='2.8' fill-opacity='.74'/%3E%3Ccircle cx='1205' cy='240' r='2.2' fill-opacity='.6'/%3E%3Ccircle cx='252' cy='304' r='2.4' fill-opacity='.67'/%3E%3Ccircle cx='538' cy='342' r='3.1' fill-opacity='.86'/%3E%3Ccircle cx='948' cy='286' r='2.7' fill-opacity='.8'/%3E%3Ccircle cx='1265' cy='330' r='2.3' fill-opacity='.66'/%3E%3Ccircle cx='366' cy='422' r='2.5' fill-opacity='.7'/%3E%3Ccircle cx='700' cy='474' r='3' fill-opacity='.82'/%3E%3Ccircle cx='1042' cy='430' r='2.4' fill-opacity='.66'/%3E%3Ccircle cx='1360' cy='460' r='2.8' fill-opacity='.74'/%3E%3Ccircle cx='296' cy='510' r='2.2' fill-opacity='.58'/%3E%3Ccircle cx='580' cy='554' r='2.7' fill-opacity='.7'/%3E%3Ccircle cx='884' cy='504' r='3.2' fill-opacity='.86'/%3E%3Ccircle cx='1089' cy='532' r='2.5' fill-opacity='.68'/%3E%3Ccircle cx='346' cy='670' r='2.1' fill-opacity='.5'/%3E%3Ccircle cx='889' cy='602' r='2.6' fill-opacity='.64'/%3E%3Ccircle cx='1321' cy='661' r='2.2' fill-opacity='.52'/%3E%3C/g%3E%3Cg fill='white'%3E%3Ccircle cx='538' cy='342' r='6' fill-opacity='.1'/%3E%3Ccircle cx='948' cy='286' r='5.5' fill-opacity='.12'/%3E%3Ccircle cx='700' cy='474' r='5.8' fill-opacity='.11'/%3E%3Ccircle cx='884' cy='504' r='6.2' fill-opacity='.12'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:cover;
    mask-size:cover;
    background-position:center;
    background-size:cover;
    opacity:.92;
    transition:color .45s ease;
  }

  .hero-pc-fondo::after{
    color:var(--hero-color, var(--pechy-principal));
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 7%,
        color-mix(in srgb,currentColor 10%,transparent) 8.5%,
        color-mix(in srgb,currentColor 92%,white 8%) 10%,
        color-mix(in srgb,currentColor 12%,transparent) 11.5%,
        transparent 13%,
        transparent 27%,
        color-mix(in srgb,currentColor 12%,transparent) 28.5%,
        color-mix(in srgb,currentColor 86%,white 14%) 30%,
        color-mix(in srgb,currentColor 10%,transparent) 31.5%,
        transparent 33%,
        transparent 48%,
        color-mix(in srgb,currentColor 10%,transparent) 49.5%,
        color-mix(in srgb,currentColor 90%,white 10%) 51%,
        color-mix(in srgb,currentColor 11%,transparent) 52.5%,
        transparent 54%,
        transparent 69%,
        color-mix(in srgb,currentColor 10%,transparent) 70.5%,
        color-mix(in srgb,currentColor 84%,white 16%) 72%,
        color-mix(in srgb,currentColor 10%,transparent) 73.5%,
        transparent 75%,
        transparent 88%,
        color-mix(in srgb,currentColor 10%,transparent) 89.5%,
        color-mix(in srgb,currentColor 88%,white 12%) 91%,
        color-mix(in srgb,currentColor 10%,transparent) 92.5%,
        transparent 94%,
        transparent 100%
      );
    background-size:185% 100%;
    background-position:125% 0;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 760' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M236 132h116l18 18h72l18 18h230l22-22h62l24-24h186l18 18h86l18 18h222'/%3E%3Cpath d='M42 246h188l22-22h96l18-18h132l28 28h84l22 22h188l24-24h91l18-18h146l26 26h168'/%3E%3Cpath d='M34 354h104l24-24h64l26-26h194l20 20h74l18 18h278l26-26h76l30-30h190l24 24h83l20 20h156'/%3E%3Cpath d='M52 468h176l24-24h92l22-22h194l28 28h88l24 24h242l22-22h98l22-22h174l30 30h76l30 30h164'/%3E%3Cpath d='M38 548h126l20-20h94l18-18h164l24 24h76l20 20h172l28-28h82l22-22h177l28 28h147'/%3E%3C/g%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 760' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M236 132h116l18 18h72l18 18h230l22-22h62l24-24h186l18 18h86l18 18h222'/%3E%3Cpath d='M42 246h188l22-22h96l18-18h132l28 28h84l22 22h188l24-24h91l18-18h146l26 26h168'/%3E%3Cpath d='M34 354h104l24-24h64l26-26h194l20 20h74l18 18h278l26-26h76l30-30h190l24 24h83l20 20h156'/%3E%3Cpath d='M52 468h176l24-24h92l22-22h194l28 28h88l24 24h242l22-22h98l22-22h174l30 30h76l30 30h164'/%3E%3Cpath d='M38 548h126l20-20h94l18-18h164l24 24h76l20 20h172l28-28h82l22-22h177l28 28h147'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:cover;
    mask-size:cover;
    filter:drop-shadow(0 0 5px color-mix(in srgb,currentColor 72%,transparent));
    opacity:.84;
    animation:hero-circuito-pulso 16s linear infinite;
    transition:color .45s ease, filter .45s ease;
    will-change:background-position, opacity;
  }

  @keyframes hero-circuito-pulso{
    0%{
      background-position:125% 0;
      opacity:.58;
    }

    45%,
    55%{
      opacity:.88;
    }

    100%{
      background-position:-125% 0;
      opacity:.58;
    }
  }
}

@media (prefers-reduced-motion:reduce){
  @media (min-width:769px){
    *,
    *::before,
    *::after{
      scroll-behavior:auto !important;
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }
  }
}