/* C156 — Inicio rediseñado copiando el diseño del cliente.
   Todo va con prefijo .h2-* (o dentro de .h2-catalogo) para no tocar las demás páginas que usan
   home.css. Las tarjetas conservan las clases de siempre (.cd-card, .btn-buy, .cd-agotado-tag…)
   porque las usa el cambio en tiempo real AGOTADO↔DISPONIBLE; aquí solo se les cambia la cara. */

.h2-hero, .h2-barra-wrap, .h2-catalogo, .h2-ventajas, .cd-nav-wrap.cd-nav-h2 { --h2-ancho: 1460px; }

/* ---------------------------------------------------------------- portada */
.h2-hero {
    position: relative;
    margin-top: .9rem;
    background:
        radial-gradient(700px 320px at 12% 40%, rgba(37, 99, 235, .22), transparent 70%),
        radial-gradient(600px 300px at 30% 100%, rgba(104, 70, 217, .18), transparent 70%);
}
.h2-hero-in {
    max-width: var(--h2-ancho); margin: 0 auto; padding: 0 1.6rem;
    display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: center; gap: 1rem;
}
.h2-hero-txt { padding: 1.6rem 0 1.4rem .4rem; }
.h2-titulo { margin: 0; line-height: 0; }
/* Los recortes del diseño traen su fondo oscuro: con "screen" lo oscuro desaparece sobre el fondo
   de la página y solo queda la letra (y el icono), sin el rectángulo. */
/* Nuestro logo (PNG con transparencia) + "TU MUNDO STREAMING" espaciado, como en el diseño. */
.h2-titulo img { width: min(470px, 100%); height: auto; filter: drop-shadow(0 6px 22px rgba(124, 58, 237, .35)); }
.h2-titulo-sub {
    display: block; margin-top: .9rem; color: #e9ecf8; font-size: 1.32rem; font-weight: 500;
    letter-spacing: .62em; line-height: 1; white-space: nowrap;
}
.h2-feats img, .h2-barra-ic, .h2-ventaja img { mix-blend-mode: screen; }
/* Y una máscara redonda quita las esquinas del cuadradito oscuro del recorte. */
.h2-feats img, .h2-barra-ic { -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 71%); mask-image: radial-gradient(circle, #000 62%, transparent 71%); }
.h2-ventaja img { -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 72%); mask-image: radial-gradient(circle, #000 58%, transparent 72%); }
.h2-lema { margin: 1.4rem 0 1.6rem; color: #eef1fb; font-size: 1.32rem; line-height: 1.45; font-weight: 400; }
.h2-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: .9rem 1.1rem; }
.h2-feats li { display: flex; align-items: center; gap: .45rem; color: #e6e9f5; font-size: .76rem; line-height: 1.25; font-weight: 600; white-space: nowrap; }
.h2-feats img { width: 42px; height: 42px; flex: 0 0 auto; }
/* La imagen se funde por la izquierda y por abajo con el fondo, como en el diseño. */
.h2-hero-art { line-height: 0; }
.h2-hero-art img {
    width: 100%; height: auto; display: block;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 96%, transparent 100%),
                        linear-gradient(180deg, #000 85%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 96%, transparent 100%),
                linear-gradient(180deg, #000 85%, transparent 100%);
    mask-composite: intersect;
}

/* ---------------------------------------------------------------- franja */
.h2-barra-wrap { max-width: var(--h2-ancho); margin: .4rem auto 0; padding: 0 1.6rem; }
.h2-barra {
    display: flex; align-items: center; gap: 1.2rem;
    padding: .7rem 1.4rem; border-radius: 14px;
    border: 1px solid rgba(59, 110, 255, .55);
    background: linear-gradient(90deg, rgba(20, 24, 70, .9), rgba(14, 18, 52, .9) 60%, rgba(30, 16, 70, .9));
    box-shadow: 0 0 24px rgba(59, 110, 255, .18), inset 0 0 30px rgba(0, 0, 0, .3);
}
.h2-barra-ic { width: 40px; height: 40px; flex: 0 0 auto; }
.h2-barra-tit { color: #fff; font-size: 1.12rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.h2-barra-tit .az { color: #3b82f6; }
.h2-barra-tit .az2 { color: #22a7f0; }
.h2-barra-sep { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .25); margin: .2rem 0; }
.h2-barra-txt { color: #dfe3f2; font-size: 1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2-barra-linea {
    flex: 1 1 60px; min-width: 40px; max-width: 110px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6);
    position: relative;
}
.h2-barra-linea::after {
    content: ""; position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; border-radius: 50%;
    background: #60a5fa; box-shadow: 0 0 8px #3b82f6;
}

/* ---------------------------------------------------------------- tarjetas */
.h2-catalogo { max-width: var(--h2-ancho); margin: 1.6rem auto 0; padding: 0 1.6rem; }
.h2-panel + .h2-panel { margin-top: 2rem; }
.h2-panel-tit {
    margin: 0 0 1rem; padding-left: .8rem; border-left: 4px solid #3b82f6;
    color: #fff; font-size: 1.5rem; font-weight: 800; letter-spacing: .01em; line-height: 1.15;
}
.h2-panel-sub { margin: -.5rem 0 1rem .95rem; color: #a5abc2; font-size: .9rem; }
.h2-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem; }

.h2-catalogo .h2-card {
    border: 1.5px solid var(--ac-soft); border-radius: 14px; overflow: hidden;
    background:
        radial-gradient(120% 60% at 50% 0%, var(--ac-dim), transparent 70%),
        linear-gradient(180deg, #121633 0%, #0b0e24 100%);
    box-shadow: 0 0 22px var(--ac-dim), inset 0 0 30px rgba(0, 0, 0, .35);
}
.h2-catalogo .h2-card:hover { transform: translateY(-4px); box-shadow: 0 0 30px var(--ac-soft), inset 0 0 30px rgba(0, 0, 0, .35); }

.h2-card-top { position: relative; z-index: 4; }
.h2-catalogo .cd-card-num {
    top: .65rem; left: .65rem; background: rgba(8, 10, 24, .75); border: 0; border-radius: 6px;
    font-size: .74rem; padding: .16rem .45rem; box-shadow: none;
}
/* Estado arriba a la izquierda, junto al número (como en el diseño). */
.h2-pill, .h2-catalogo .cd-agotado-tag {
    position: absolute; top: .62rem; left: 2.65rem; z-index: 4;
    font-size: .64rem; font-weight: 800; letter-spacing: .05em; color: #fff;
    border-radius: 6px; padding: .2rem .5rem; border: 0; box-shadow: none; right: auto;
}
.h2-pill-ok { background: #15803d; box-shadow: 0 0 10px rgba(34, 197, 94, .35); }
.h2-catalogo .cd-agotado-tag { background: #dc2626; box-shadow: 0 0 10px rgba(220, 38, 38, .45); left: auto; right: .65rem; }
.h2-pill-prox { background: #475569; display: none; }
.h2-card.cd-card-agotado .h2-pill-ok, .h2-card.cd-card-proxima .h2-pill-ok { display: none; }
.h2-card.cd-card-proxima .h2-pill-prox { display: inline-block; }

/* La imagen del plan ocupa la parte de arriba y se funde con el fondo de la tarjeta. */
.h2-catalogo .h2-card-art {
    aspect-ratio: auto; height: 0; padding: 0 0 76%; position: relative;
    background-size: cover; background-position: center 62%;
    justify-content: center;
}
.h2-catalogo .h2-card-art::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 45%, rgba(15, 19, 48, .85) 80%, #0f1330 100%);
}
.h2-catalogo .h2-card-art .cd-wordmark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* El texto sube un poco sobre la parte baja (ya oscurecida) de la imagen, como en el diseño. */
.h2-card-body { position: relative; z-index: 2; margin-top: -.6rem; padding: 0 1rem 1rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.h2-checks { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .32rem; }
.h2-checks li {
    position: relative; padding-left: 1.45rem; color: #eef0f8; font-size: .84rem; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.h2-checks li::before {
    content: ""; position: absolute; left: 0; top: .12rem; width: 15px; height: 15px; border-radius: 50%;
    background: var(--ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}
.h2-precio { margin: 0 0 .8rem; color: #fff; display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; }
.h2-precio .desde { font-size: .82rem; font-weight: 700; letter-spacing: .02em; margin-right: .2rem; }
.h2-precio .cur { color: var(--ac); font-size: 1.15rem; font-weight: 800; }
.h2-precio .monto { font-size: 1.22rem; font-weight: 800; }

.h2-catalogo .btn-buy {
    position: relative; margin: auto 0 0; width: 100%; padding: .7rem 2.6rem .7rem 1rem;
    border-radius: 12px; border: 0; justify-content: center;
    background: linear-gradient(90deg, var(--ac), color-mix(in srgb, var(--ac) 70%, #000));
    color: #fff; font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none;
    box-shadow: 0 0 18px var(--ac-dim);
}
.h2-catalogo .btn-buy .cd-ic { width: 1.1em; height: 1.1em; }
/* La flecha en círculo del final del botón. */
.h2-catalogo a.btn-buy::after {
    content: ""; position: absolute; right: .55rem; top: 50%; width: 24px; height: 24px; margin-top: -12px;
    border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .85);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 7 5 5-5 5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.h2-catalogo a.btn-buy:hover { filter: brightness(1.12); box-shadow: 0 0 24px var(--ac-soft); }
.h2-catalogo button.btn-buy[disabled] {
    width: 100%; padding: .7rem 1rem; background: #1b2033; color: #d1d5e4;
    border: 1px solid rgba(255, 255, 255, .08); box-shadow: none;
}
.h2-catalogo button.btn-buy[disabled]::before {
    content: ""; width: 16px; height: 16px; flex: 0 0 auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1d5e4' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M6 18 18 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Agotada: apagada como antes, pero el estado y el botón se siguen leyendo. */
.h2-catalogo .h2-card.cd-card-agotado > *:not(.cd-agotado-tag) { filter: none; }
.h2-catalogo .h2-card.cd-card-agotado .h2-card-art { filter: saturate(.35) brightness(.7); }
.h2-catalogo .h2-card.cd-card-agotado { border-color: rgba(255, 255, 255, .22); box-shadow: none; }
.h2-catalogo .h2-card.cd-card-agotado .h2-checks li::before { background-color: #64748b; }
.h2-catalogo .h2-card.cd-card-agotado .h2-precio .cur { color: #94a3b8; }

/* ---------------------------------------------------------------- ventajas de abajo */
.h2-ventajas {
    max-width: var(--h2-ancho); margin: 1.8rem auto 0; padding: 0 1.6rem;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem;
}
.h2-ventaja {
    display: flex; align-items: center; gap: 1rem; padding: 1rem 1.4rem; border-radius: 12px;
    border: 1px solid rgba(59, 90, 200, .4);
    background: linear-gradient(135deg, rgba(16, 22, 60, .85), rgba(10, 14, 40, .85));
}
.h2-ventaja img { width: 56px; height: 56px; flex: 0 0 auto; }
.h2-ventaja strong { display: block; color: #fff; font-size: .92rem; font-weight: 800; letter-spacing: .01em; }
.h2-ventaja small { display: block; color: #c3c9de; font-size: .84rem; margin-top: .15rem; }

/* ---------------------------------------------------------------- tableta */
@media (max-width: 1199.98px) {
    .h2-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .h2-lema { font-size: 1.15rem; }
    .h2-barra-tit { font-size: .98rem; }
    .h2-barra-txt { font-size: .9rem; }
    .h2-ventajas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .h2-hero-in { grid-template-columns: 1fr; }
    .h2-hero-txt { text-align: center; padding: 1.2rem 0 .2rem; }
    .h2-feats { justify-content: center; }
    .h2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .h2-barra { flex-wrap: wrap; justify-content: center; text-align: center; gap: .5rem 1rem; }
    .h2-barra-tit { white-space: normal; }
    .h2-barra-sep, .h2-barra-linea { display: none; }
    .h2-barra-txt { white-space: normal; flex-basis: 100%; }
}

/* ---------------------------------------------------------------- celular */
@media (max-width: 767.98px) {
    .h2-hero { margin-top: .3rem; }
    .h2-hero-in, .h2-barra-wrap, .h2-catalogo, .h2-ventajas { padding: 0 .75rem; }
    .h2-titulo img { width: min(300px, 82%); }
    .h2-titulo-sub { font-size: .82rem; letter-spacing: .45em; margin-top: .6rem; }
    .h2-lema { font-size: 1rem; margin: .9rem 0 1rem; }
    .h2-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .8rem; text-align: left; }
    .h2-feats li { font-size: .74rem; }
    .h2-feats img { width: 34px; height: 34px; }
    .h2-barra { padding: .7rem .9rem; }
    .h2-barra-ic { width: 32px; height: 32px; }
    .h2-barra-tit { font-size: .86rem; }
    .h2-barra-txt { font-size: .82rem; }
    .h2-panel-tit { font-size: 1.15rem; }
    .h2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .h2-card-body { padding: .55rem .65rem .7rem; }
    .h2-checks li { font-size: .74rem; padding-left: 1.25rem; }
    .h2-checks li::before { width: 13px; height: 13px; background-size: 8px 8px; }
    .h2-precio .desde { font-size: .7rem; }
    .h2-precio .cur, .h2-precio .monto { font-size: 1rem; }
    .h2-catalogo .btn-buy { font-size: .8rem; padding: .6rem 2rem .6rem .6rem; }
    .h2-catalogo a.btn-buy::after { width: 20px; height: 20px; margin-top: -10px; right: .4rem; background-size: 12px 12px; }
    .h2-pill, .h2-catalogo .cd-agotado-tag { font-size: .56rem; padding: .16rem .4rem; }
    .h2-ventajas { grid-template-columns: 1fr; gap: .7rem; }
    .h2-ventaja { padding: .8rem 1rem; }
    .h2-ventaja img { width: 46px; height: 46px; }
}

/* ---------------------------------------------------------------- barra única (solo Inicio) */
/* Una sola barra arriba, como en el diseño: logo, menú, "Síguenos" + redes, "Código", carrito y el
   acceso. Más ancha que la de las demás páginas para que todo quepa en una fila. */
.cd-nav-wrap.cd-nav-h2 { max-width: var(--h2-ancho, 1460px); padding: 0 1.6rem; margin-top: .6rem; }
.cd-nav-h2 .cd-navbar { flex-wrap: nowrap; gap: .9rem; padding: .55rem 1rem; }
.cd-nav-h2 .cd-brand-play { width: 34px; height: 34px; }
.cd-nav-h2 .cd-brand-logo { height: 22px; }
.cd-nav-h2 .cd-nav-links { flex: 0 0 auto; flex-wrap: nowrap; white-space: nowrap; gap: .9rem; }
.cd-nav-h2 .cd-input { width: 108px; }
.cd-nav-h2 .cd-navbar .cd-login .cd-input { flex: 0 1 108px; min-width: 92px; }
.cd-nav-social { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex: 0 0 auto; }
.cd-nav-social-lbl { color: #e6e9f5; font-size: .8rem; font-weight: 600; margin-right: .2rem; white-space: nowrap; }
.cd-nav-social .cd-social { width: 30px; height: 30px; color: #fff; border: 0; }
.cd-nav-social .cd-social-fb { background: #1877f2; }
.cd-nav-social .cd-social-ig { background: radial-gradient(circle at 30% 110%, #fdc468, #df4996 45%, #7c3aed 90%); }
.cd-nav-social .cd-social-tt { background: #111827; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.cd-nav-social .cd-social-yt { background: #e11d2e; }
.cd-nav-social .cd-social:hover { filter: brightness(1.15); color: #fff; }
.cd-nav-social .cd-codigo-top { margin-left: .4rem; font-size: .78rem; padding: .32rem .8rem; }
.cd-nav-h2 .cd-login { flex: 0 0 auto; }
.cd-nav-h2 .cd-nav-social + .cd-login { margin-left: .4rem; }
/* Si no cabe todo, primero se va la palabra "Síguenos" y luego las redes; el resto se queda. */
@media (max-width: 1600px) { .cd-nav-social-lbl { display: none; } }
@media (max-width: 1440px) { .cd-nav-social .cd-social { display: none; } }
@media (max-width: 767.98px) { .cd-nav-social { display: none; } }
/* En pantallas grandes todo el Inicio se ensancha un poco (barra incluida): así cabe "Síguenos". */
@media (min-width: 1700px) {
    .h2-hero, .h2-barra-wrap, .h2-catalogo, .h2-ventajas, .cd-nav-wrap.cd-nav-h2 { --h2-ancho: 1580px; }
}
@media (max-width: 1320px) {
    .cd-nav-h2 .cd-navbar { gap: .6rem; }
    .cd-nav-h2 .cd-nav-links { gap: .6rem; }
    .cd-nav-h2 .cd-navbar .cd-login .cd-input { flex-basis: 96px; min-width: 84px; }
}
/* Tableta: no cabe en una fila; el acceso (correo/contraseña) baja a la segunda, centrado. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .cd-nav-h2 .cd-navbar { flex-wrap: wrap; justify-content: center; row-gap: .55rem; }
    .cd-nav-h2 .cd-nav-social { margin-left: 0; }
    .cd-nav-h2 .cd-login { flex-basis: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- portada de extremo a extremo */
/* Como en el diseño: la portada ocupa TODO el ancho de la pantalla. A la izquierda, pegada al borde,
   la columna de pantallas; detrás del texto, azul oscuro; y las carátulas llegan hasta el borde
   derecho (su propia imagen trae las pantallas del final). El texto se alinea con el resto de la
   página (mismo margen que la barra y las tarjetas). */
@media (min-width: 992px) {
    .h2-hero {
        margin-top: .7rem;
        background:
            linear-gradient(90deg, rgba(10, 11, 26, 0) 0, #0a0d24 7rem),
            url("/images/home2/pared-izq.jpg") left center / auto 100% no-repeat,
            radial-gradient(700px 320px at 18% 45%, rgba(37, 99, 235, .2), transparent 70%),
            #0a0d24;
    }
    .h2-hero-in {
        max-width: none; padding: 0; gap: 0;
        grid-template-columns: minmax(0, 41.7fr) minmax(0, 58.3fr);
    }
    .h2-hero-txt {
        padding: 1.4rem 1rem 1.4rem max(5.6rem, calc((100vw - var(--h2-ancho)) / 2 + 2rem));
    }
    /* Las carátulas: solo se funden por la izquierda y por abajo; por la derecha llegan al borde. */
    .h2-hero-art img {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%), linear-gradient(180deg, #000 88%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 7%), linear-gradient(180deg, #000 88%, transparent 100%);
    }
}

/* ---------------------------------------------------------------- C157 — tarjetas compactas */
/* Como la nueva referencia del cliente: la imagen del plan ocupa TODA la tarjeta y un degradado
   oscuro sube desde abajo hasta la mitad, para que los ✓, el precio y el botón se lean encima
   de la imagen. Más pequeñas que antes. Estas reglas van al final y mandan sobre las de arriba. */
.h2-catalogo .h2-grid { gap: 1rem; }
.h2-catalogo .h2-card { position: relative; display: block; aspect-ratio: 225 / 262; border-radius: 16px; }
.h2-catalogo .h2-card-art {
    position: absolute; inset: 0; height: auto; padding: 0; z-index: 0;
    background-size: 124% auto; background-position: center 92%; background-repeat: no-repeat; background-color: #0b0e24;
}
.h2-catalogo .h2-card-art::after {
    background: linear-gradient(180deg,
        rgba(9, 11, 28, 0) 0%, rgba(9, 11, 28, 0) 46%,
        rgba(9, 11, 28, .62) 58%, rgba(9, 11, 28, .92) 70%, rgba(9, 11, 28, .97) 100%);
}
.h2-catalogo .h2-card-body {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0; z-index: 2;
    padding: 0 .85rem .8rem;
}
.h2-catalogo .h2-checks { gap: .18rem; margin-bottom: .45rem; }
.h2-catalogo .h2-checks li { font-size: .78rem; padding-left: 1.3rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.h2-catalogo .h2-checks li::before { width: 13px; height: 13px; top: .14rem; background-size: 8px 8px; }
.h2-catalogo .h2-precio { margin-bottom: .55rem; justify-content: center; }
.h2-catalogo .h2-precio .desde { font-size: .74rem; }
.h2-catalogo .h2-precio .cur, .h2-catalogo .h2-precio .monto { font-size: 1.08rem; }
.h2-catalogo .btn-buy { padding: .55rem 2.3rem .55rem .8rem; font-size: .86rem; border-radius: 999px; }
.h2-catalogo button.btn-buy[disabled] { padding: .55rem .8rem; border-radius: 999px; }
.h2-catalogo a.btn-buy::after { width: 22px; height: 22px; margin-top: -11px; right: .45rem; border: 0; background-color: rgba(0, 0, 0, .28); }
/* Pastillas redondas, como en la referencia. */
.h2-catalogo .h2-pill, .h2-catalogo .cd-agotado-tag { border-radius: 999px; padding: .2rem .6rem; }
.h2-catalogo .cd-card-num { background: rgba(8, 10, 24, .6); }

@media (max-width: 767.98px) {
    .h2-catalogo .h2-card { aspect-ratio: 3 / 4.4; }
    /* En celular la tercera línea (igual en todas) sobra y tapaba el logo. */
    .h2-catalogo .h2-checks li:nth-child(3) { display: none; }
    .h2-catalogo .h2-card-body { padding: 0 .55rem .6rem; }
    .h2-catalogo .h2-checks li { font-size: .68rem; padding-left: 1.1rem; }
    .h2-catalogo .h2-checks li::before { width: 11px; height: 11px; background-size: 7px 7px; }
    .h2-catalogo .h2-precio .cur, .h2-catalogo .h2-precio .monto { font-size: .95rem; }
    .h2-catalogo .btn-buy { font-size: .74rem; padding: .45rem 1.8rem .45rem .5rem; }
    .h2-catalogo a.btn-buy::after { width: 18px; height: 18px; margin-top: -9px; right: .3rem; background-size: 11px 11px; }
}

/* ---------------------------------------------------------------- C158 — buscador */
.h2-buscar-wrap { display: none; }
.h2-catalogo .h2-card[hidden], .h2-panel[hidden] { display: none !important; }
.h2-buscar-nada { margin: .8rem 0 0; color: #a5abc2; text-align: center; font-size: .9rem; }
.h2-titulo-movil, .h2-hero-art-movil { display: none; }

/* ---------------------------------------------------------------- C158 — celular, como el diseño móvil */
@media (max-width: 767.98px) {
    /* Cabecera: ☰ + logo a la izquierda; "Código" dorado + WhatsApp a la derecha. El carrito solo
       si tiene algo dentro. */
    .cd-mh-h2 .cd-mh-center { align-items: flex-start; flex: 0 1 auto; }
    .cd-mh-acciones { display: flex; align-items: center; gap: .45rem; margin-left: auto; }
    .cd-mh-codigo {
        display: inline-flex; align-items: center; gap: .35rem; padding: .34rem .75rem; border-radius: 999px;
        border: 1.5px solid #f5b40b; color: #fde68a; background: rgba(245, 180, 11, .1);
        font-size: .82rem; font-weight: 800; text-decoration: none; box-shadow: 0 0 12px rgba(245, 180, 11, .35);
    }
    .cd-mh-codigo svg { width: 16px; height: 16px; color: #f5b40b; }
    .cd-mh-wa {
        width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
        background: #22c55e; color: #fff; box-shadow: 0 0 12px rgba(34, 197, 94, .45);
    }
    .cd-mh-wa svg { width: 21px; height: 21px; }
    .cd-mh-h2 .cd-mh-cart { flex: 0 0 auto; }
    .cd-mh-h2 .cd-mh-cart .cd-cartlink:not(:has(.cd-cartcount)) { display: none; }

    /* Acceso arriba (correo/contraseña + Ingresar/Registro), a todo lo ancho. */
    /* C159 — el bloque de correo/contraseña VUELVE arriba (Diego lo pidió), como en el resto del sitio. */

    /* Portada: "TU MUNDO / STREAMING" en grande, personajes detrás a la derecha. */
    .h2-hero { position: relative; overflow: hidden; margin-top: 0; background: #0a0d24; }
    .h2-hero-art-movil {
        display: block; position: absolute; top: 0; right: 0; width: 64%; height: auto; z-index: 0;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(180deg, #000 70%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(180deg, #000 70%, transparent 100%);
        mask-composite: intersect;
    }
    .h2-hero .h2-hero-art, .h2-hero .h2-titulo { display: none; }
    .h2-hero-in { padding: 0 .9rem; }
    .h2-hero-txt { position: relative; z-index: 1; text-align: left; padding: 1.5rem 0 .9rem; }
    .h2-titulo-movil {
        display: block; margin: 0; color: #fff; font-weight: 900; font-size: 2.45rem; line-height: 1.02;
        letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0, 0, 0, .65);
    }
    .h2-titulo-movil span { display: block; }
    .h2-titulo-movil .az {
        background: linear-gradient(90deg, #2563eb, #38bdf8); -webkit-background-clip: text; background-clip: text;
        color: transparent; text-shadow: none; filter: drop-shadow(0 2px 10px rgba(37, 99, 235, .5));
    }
    .h2-lema { font-size: 1rem; margin: .7rem 0 1.1rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
    .h2-feats { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: .3rem; }
    .h2-feats li { font-size: .62rem; gap: .3rem; white-space: nowrap; }
    .h2-feats img { width: 30px; height: 30px; }

    /* La franja "ESTRENOS…" no va en el diseño móvil. */
    .h2-barra-wrap { display: none; }

    /* Buscador. */
    .h2-buscar-wrap { display: block; padding: 0 .75rem; margin: .6rem 0 0; }
    .h2-buscar {
        display: flex; align-items: center; gap: .7rem; margin: 0; padding: .72rem 1.1rem; border-radius: 999px;
        border: 1.5px solid rgba(59, 110, 255, .65); background: rgba(12, 16, 48, .85);
        box-shadow: 0 0 16px rgba(59, 110, 255, .2);
    }
    .h2-buscar svg { width: 22px; height: 22px; color: #e6e9f5; flex: 0 0 auto; }
    .h2-buscar input {
        flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: 1rem;
    }
    .h2-buscar input::placeholder { color: #c3c9de; }

    /* Tarjetas: en LISTA, una por fila — imagen a la izquierda, datos y botón a la derecha. */
    .h2-catalogo { margin-top: 1.2rem; }
    .h2-catalogo .h2-grid { grid-template-columns: 1fr; gap: .65rem; }
    .h2-catalogo .h2-card {
        aspect-ratio: auto; display: grid; grid-template-columns: 46% 1fr; min-height: 140px; border-radius: 14px;
    }
    .h2-catalogo .h2-card-art {
        position: relative; inset: auto; grid-column: 1; grid-row: 1;
        background-size: cover; background-position: center 42%;
    }
    .h2-catalogo .h2-card-art::after { background: linear-gradient(90deg, rgba(12, 16, 48, 0) 55%, #0c1030 100%); }
    .h2-catalogo .cd-card-num { display: none; }
    .h2-catalogo .h2-pill, .h2-catalogo .cd-agotado-tag {
        top: .55rem; left: calc(46% + .35rem); right: auto; font-size: .64rem; padding: .18rem .6rem;
    }
    .h2-catalogo .h2-card-body {
        position: static; grid-column: 2; grid-row: 1; margin: 0; padding: 2rem .6rem .6rem .35rem;
        display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "checks btn" "precio btn";
        align-items: center; column-gap: .45rem; background: linear-gradient(90deg, #0c1030, #0b0e26);
    }
    .h2-catalogo .h2-checks { grid-area: checks; margin: 0 0 .35rem; gap: .12rem; }
    .h2-catalogo .h2-checks li { font-size: .68rem; padding-left: 1.15rem; }
    .h2-catalogo .h2-checks li:nth-child(3) { display: list-item; }
    .h2-catalogo .h2-checks li::before { width: 12px; height: 12px; background-size: 7px 7px; }
    .h2-catalogo .h2-precio { grid-area: precio; margin: 0; justify-content: flex-start; }
    .h2-catalogo .h2-precio .desde { font-size: .72rem; }
    .h2-catalogo .h2-precio .cur, .h2-catalogo .h2-precio .monto { font-size: 1.02rem; }
    .h2-catalogo .btn-buy, .h2-catalogo button.btn-buy[disabled] {
        grid-area: btn; width: auto; margin: 0; font-size: .7rem; white-space: nowrap;
        padding: .55rem 1.7rem .55rem .65rem; border-radius: 10px;
    }
    .h2-catalogo button.btn-buy[disabled] { padding: .55rem .7rem; }
    .h2-catalogo a.btn-buy::after { width: 16px; height: 16px; margin-top: -8px; right: .35rem; background-size: 10px 10px; }

    /* Las 4 ventajas en una fila, pequeñas y centradas. */
    .h2-ventajas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; padding: 0 .6rem; }
    .h2-ventaja { flex-direction: column; text-align: center; gap: .35rem; padding: .7rem .3rem; }
    .h2-ventaja img { width: 34px; height: 34px; }
    .h2-ventaja strong { font-size: .6rem; line-height: 1.2; }
    .h2-ventaja small { font-size: .56rem; line-height: 1.25; }
}
@media (max-width: 767.98px) {
    /* Ajustes de la lista (C158b): la cabecera de la tarjeta (número y estado) se coloca sobre la
       tarjeta entera, no dentro de una celda del grid; y el cuerpo va en dos filas: los ✓ arriba y,
       debajo, precio a la izquierda + botón a la derecha. */
    .h2-catalogo .h2-card { grid-template-columns: 40% 1fr; min-height: 132px; }
    .h2-catalogo .h2-card-top { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
    .h2-catalogo .h2-pill, .h2-catalogo .cd-agotado-tag { left: calc(40% + .45rem); top: .5rem; }
    .h2-catalogo .h2-card-body {
        grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "checks checks" "precio btn";
        padding: 1.9rem .6rem .6rem .45rem; row-gap: .35rem; align-content: center;
    }
    .h2-catalogo .h2-checks li { font-size: .7rem; }
    .h2-catalogo .h2-precio { white-space: nowrap; flex-wrap: nowrap; gap: .2rem; }
    .h2-catalogo .h2-precio .desde { font-size: .66rem; margin-right: .1rem; }
    .h2-catalogo .h2-precio .cur, .h2-catalogo .h2-precio .monto { font-size: .95rem; }
    .h2-catalogo .btn-buy, .h2-catalogo button.btn-buy[disabled] { font-size: .66rem; padding: .5rem 1.55rem .5rem .55rem; }
    .h2-catalogo button.btn-buy[disabled] { padding: .5rem .6rem; }
    .h2-catalogo .btn-buy .cd-ic { width: .95em; height: .95em; }

    /* Las 4 ventajas de la portada: que quepan las cuatro. */
    .h2-feats { gap: .15rem; }
    .h2-feats li { font-size: .56rem; gap: .22rem; }
    .h2-feats img { width: 26px; height: 26px; }
}
@media (max-width: 767.98px) {
    /* Más sitio para precio + botón en la misma fila. */
    .h2-catalogo .h2-card { grid-template-columns: 36% 1fr; }
    .h2-catalogo .h2-pill, .h2-catalogo .cd-agotado-tag { left: calc(36% + .45rem); }
    .h2-catalogo .h2-card-body { column-gap: .3rem; padding-right: .5rem; }
    .h2-catalogo .h2-precio .desde { font-size: .6rem; }
    .h2-catalogo .h2-precio .cur, .h2-catalogo .h2-precio .monto { font-size: .9rem; }
}
@media (max-width: 379.98px) {
    .h2-catalogo .h2-precio .desde { display: none; }
}
@media (max-width: 767.98px) {
    /* C159 — Bloque de acceso arriba en celular: los dos campos a partes iguales y a todo lo ancho
       (las reglas de la barra de PC los dejaban en 108px y cortaban "CORREO"). */
    .cd-nav-wrap.cd-nav-h2 { padding: 0 .75rem; margin-top: .55rem; }
    .cd-nav-h2 .cd-navbar { flex-wrap: wrap; padding: .75rem; }
    .cd-nav-h2 .cd-login { flex: 1 1 100%; }
    .cd-nav-h2 .cd-navbar .cd-login .cd-input { flex: 1 1 0; min-width: 0; width: auto; }
}
@media (max-width: 767.98px) {
    /* C160 — El cliente quitó en celular la portada ("TU MUNDO STREAMING", frase, ventajas y
       personajes) y el buscador: tras la cabecera y el acceso van directo las tarjetas. */
    .h2-hero, .h2-buscar-wrap { display: none; }
    .h2-catalogo { margin-top: 1rem; }
}

/* ---------------------------------------------------------------- C161 — logo nuevo */
/* Barra única del Inicio: el logo nuevo un poco más grande. */
.cd-nav-h2 .cd-brand-logo2 { height: 44px; }
/* Portada de PC: el logo grande y CENTRADO (lo pidió el cliente), con la frase y las ventajas
   centradas debajo para que el bloque se lea como uno solo. */
@media (min-width: 768px) {
    .h2-hero-txt { text-align: center; }
    .h2-titulo img { width: min(520px, 100%); filter: drop-shadow(0 6px 26px rgba(37, 99, 235, .35)); }
    .h2-lema { margin-left: auto; margin-right: auto; }
    .h2-feats { justify-content: center; }
}

/* C165 — Como el diseño del cliente: la tarjeta AGOTADA se ve igual de viva (imagen a todo color);
   lo que avisa que no se puede comprar es la pastilla roja "AGOTADO" y el botón gris. */
.h2-catalogo .h2-card.cd-card-agotado .h2-card-art { filter: none; }
.h2-catalogo .h2-card.cd-card-agotado { border-color: rgba(255, 255, 255, .28); box-shadow: 0 0 18px rgba(255, 255, 255, .06); }

/* ---------------------------------------------------------------- C166 — tarjeta IDÉNTICA al diseño */
/* Sin el número; "DISPONIBLE" arriba a la izquierda y "AGOTADO" a la derecha; tarjeta casi cuadrada
   con borde del color de la plataforma; ✓ en círculo hueco; "Desde S/ 5.00" alineado a la
   izquierda, en blanco y más grande. */
@media (min-width: 768px) {
    .h2-catalogo .h2-card { aspect-ratio: 267 / 292; border: 1.5px solid var(--ac); border-radius: 18px;
        box-shadow: 0 0 22px var(--ac-soft), inset 0 0 0 1px rgba(255, 255, 255, .04); }
    .h2-catalogo .h2-card:hover { box-shadow: 0 0 32px var(--ac-soft), inset 0 0 0 1px rgba(255, 255, 255, .06); }
    .h2-catalogo .cd-card-num { display: none; }
    .h2-catalogo .h2-pill { left: .75rem; top: .75rem; font-size: .7rem; padding: .28rem .75rem; }
    .h2-catalogo .cd-agotado-tag { right: .75rem; left: auto; top: .75rem; font-size: .7rem; padding: .28rem .75rem; }
    .h2-catalogo .h2-card-art { background-size: cover; background-position: center top; }
    .h2-catalogo .h2-card-art::after {
        background: linear-gradient(180deg, rgba(8, 10, 30, 0) 0%, rgba(8, 10, 30, 0) 48%,
            rgba(8, 10, 30, .55) 60%, rgba(8, 10, 30, .88) 74%, rgba(8, 10, 30, .95) 100%);
    }
    .h2-catalogo .h2-card-body { padding: 0 1rem .9rem; }
    .h2-catalogo .h2-checks { gap: .28rem; margin-bottom: .5rem; }
    .h2-catalogo .h2-checks li { font-size: .82rem; color: #eef1fb; padding-left: 1.45rem; }
    .h2-catalogo .h2-checks li::before {
        width: 14px; height: 14px; top: .1rem; background-color: transparent;
        border: 1.6px solid var(--ac); box-sizing: border-box;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E");
        background-size: 9px 9px;
    }
    .h2-catalogo .h2-precio { justify-content: flex-start; align-items: baseline; gap: .55rem; margin-bottom: .6rem; }
    .h2-catalogo .h2-precio .desde { font-size: .95rem; font-weight: 500; letter-spacing: 0; color: #fff; margin: 0; }
    .h2-catalogo .h2-precio .cur, .h2-catalogo .h2-precio .monto { color: #fff; font-size: 1.35rem; font-weight: 700; }
    .h2-catalogo .h2-precio .cur { margin-right: -.2rem; }
    .h2-catalogo .btn-buy { padding: .62rem 2.4rem .62rem .9rem; font-size: .92rem; font-weight: 600; }
    .h2-catalogo button.btn-buy[disabled] { padding: .62rem .9rem; }
    .h2-catalogo .h2-card.cd-card-agotado .h2-checks li::before { border-color: #94a3b8; filter: grayscale(1); }
}
@media (min-width: 768px) {
    /* C166b — más compacto, como el diseño: el texto empieza a mitad de la tarjeta. */
    .h2-catalogo .h2-card-body { padding: 0 .9rem .75rem; }
    .h2-catalogo .h2-checks { gap: .12rem; margin-bottom: .35rem; }
    .h2-catalogo .h2-checks li { font-size: .76rem; line-height: 1.25; }
    .h2-catalogo .h2-checks li::before { width: 13px; height: 13px; top: .06rem; }
    .h2-catalogo .h2-precio { margin-bottom: .45rem; }
    .h2-catalogo .h2-precio .desde { font-size: .85rem; }
    .h2-catalogo .h2-precio .cur, .h2-catalogo .h2-precio .monto { font-size: 1.18rem; }
    .h2-catalogo .btn-buy { padding: .5rem 2.2rem .5rem .8rem; font-size: .86rem; }
    .h2-catalogo button.btn-buy[disabled] { padding: .5rem .8rem; }
    .h2-catalogo .h2-pill, .h2-catalogo .cd-agotado-tag { font-size: .64rem; padding: .22rem .65rem; top: .65rem; }
    .h2-catalogo .h2-pill { left: .65rem; }
    .h2-catalogo .cd-agotado-tag { right: .65rem; }
}