/* ═══════════════════════════════════════════════════════════════════════════
   mundial.css — Landing del Mundial (casaraza.com.ar/mundial)
   Contiene: estilos originales del landing + integraciones con el sistema (cart/drawer)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Aislamos las vars del landing al body con clase .mundial-page para no pisar
   las del sistema (style.css). El drawer/cart usan style.css con sus propias vars. */
body.mundial-page {
    --bg-color: #050505;
    --bg-lighter: #111111;
    --card-bg: #141414;
    --primary-color: #C35527;
    --accent-color: #C35527;
    --text-color: #ffffff;
    --text-muted: #9e9e9e;
    --border-color: #2a2a2a;
    --font-heading: 'Bricolage Grotesque', sans-serif;
    --font-body: 'Outfit', sans-serif;
    --container-width: 1400px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
}

body.mundial-page h1,
body.mundial-page h2,
body.mundial-page h3,
body.mundial-page h4 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    text-transform: uppercase;
}

/* --- UI Components --- */
body.mundial-page .container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

body.mundial-page .btn-primary {
    display: inline-block;
    background-color: var(--accent-color);
    color: white;
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(197, 65, 50, 0.3);
}

body.mundial-page .btn-primary:hover {
    background-color: #da4837;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(197, 65, 50, 0.5);
}

/* --- Top Marquee --- */
.mundial-page .marquee-wrapper-top {
    background-color: #da4837;
    color: #ffffff;
    padding: 0.3rem 0;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 1px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
}

.mundial-page .marquee-content-top {
    display: flex;
    animation: scroll-top 25s linear infinite;
}

.mundial-page .marquee-content-top span {
    padding: 0 2rem;
}

@keyframes scroll-top {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* --- Header --- */
.mundial-page .main-header {
    position: fixed;
    top: 25px;
    left: 0;
    width: 100%;
    padding: 1rem 0;
    z-index: 100;
    transition: background-color 0.4s ease;
}

.mundial-page .main-header.scrolled {
    background-color: rgba(5, 5, 5, 0.95);
    border-bottom: 1px solid var(--border-color);
}

/* backdrop-filter va en un pseudo para no crear un containing block que afecte
   al cart-btn flotante (mobile, position:fixed) cuando está dentro del header */
.mundial-page .main-header.scrolled::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: -1;
    pointer-events: none;
}

.mundial-page .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mundial-page .logo img {
    height: 50px;
    width: auto;
}

/* Carrito en el header del mundial (naranja Casa Raza) */
.mundial-page .mundial-cart-btn {
    position: relative;
    background: #b63c2e;
    border: 1px solid #c35527;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(195, 85, 39, 0.4);
}

.mundial-page .mundial-cart-btn:hover {
    background: #d96234;
    border-color: #d96234;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(195, 85, 39, 0.55);
}

.mundial-page .mundial-cart-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.mundial-page .mundial-cart-btn .cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--accent-color);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-color);
}

/* --- Hero Section --- */
.mundial-page .hero {
    position: relative;
    height: 100vh;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: translateZ(0);
}

.mundial-page .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    transform: scale(1.1);
    overflow: hidden;
}

.mundial-page .hero-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: opacity 0.35s ease;
}

.mundial-page .hero-bg video.hero-loop-fading {
    opacity: 0;
}

.mundial-page .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.75) 100%);
    pointer-events: none;
}

.mundial-page .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,
            rgba(5, 5, 5, 0.9) 0%,
            rgba(5, 5, 5, 0.55) 50%,
            rgba(5, 5, 5, 0.95) 100%);
    z-index: -1;
}

/* ── Hero CTA row ────────────────────────────────────────────── */
.mundial-page .hero-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0;
}

/* ── Botón Play del hero ─────────────────────────────────────── */
.mundial-page .hero-play-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0.7rem 1.4rem 0.7rem 0.9rem;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.mundial-page .hero-play-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.mundial-page .hero-play-icon {
    width: 34px;
    height: 34px;
    background: #fff;
    color: #111;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.mundial-page .hero-play-btn:hover .hero-play-icon {
    transform: scale(1.1);
}

/* ── Modal video completo ────────────────────────────────────── */
.hero-video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 1.5rem;
}

.hero-video-modal.active {
    opacity: 1;
    pointer-events: all;
}

.hero-video-modal-inner {
    position: relative;
    width: 100%;
    max-width: 960px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.hero-video-modal.active .hero-video-modal-inner {
    transform: scale(1);
}

.hero-video-modal-inner video {
    display: block;
    width: 100%;
    max-height: 80vh;
    background: #000;
}

.hero-video-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.hero-video-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .mundial-page .hero-play-btn {
        font-size: 0.75rem;
        padding: 0.6rem 1.2rem 0.6rem 0.7rem;
    }

    .mundial-page .hero-play-icon {
        width: 28px;
        height: 28px;
    }

    .hero-video-modal {
        padding: 1rem;
        align-items: center;
    }

    .hero-video-modal-inner {
        border-radius: 12px;
        max-height: 85vh;
    }

    .hero-video-modal-inner video {
        max-height: 85vh;
    }
}

.mundial-page #heroConfetti {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
    mask-image: linear-gradient(to bottom, black 0%, black 85%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 85%, transparent 100%) !important;
}

.mundial-page .hero-content {
    text-align: center;
    z-index: 10;
    max-width: 800px;
    padding: 0 2rem;
    margin-top: 50px;
}

.mundial-page .hero-eyebrow {
    display: inline-block;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(20px);
}

.mundial-page .hero-title {
    font-size: 6.5rem;
    line-height: 1;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    opacity: 0;
}

.mundial-page .hero-title .hero-accent {
    color: transparent;
    -webkit-text-stroke: 1.5px #fff;
    text-shadow: none;
}

.mundial-page .hero-subtitle {
    font-size: 1.5rem;
    font-weight: 300;
    color: #fff;
    margin-bottom: 2.5rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    opacity: 0;
}

.mundial-page .hero .btn-primary {
    opacity: 0;
}

.mundial-page .hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 10;
}

.mundial-page .hero-wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 120px;
}

.mundial-page .hero-wave .shape-fill-3 {
    fill: #202020;
}

/* --- Sections General --- */
.mundial-page .section {
    padding: 8rem 0;
    background-color: #202020;
}

.mundial-page .section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.mundial-page .section-header h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.mundial-page .section-header p {
    color: var(--text-muted);
    font-size: 1.2rem;
}

/* --- Separador Albiceleste --- */
.mundial-page .divider-albiceleste {
    border: none;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.02) 20%,
            #74ACDF 47%,
            #FFFFFF 50%,
            #74ACDF 53%,
            rgba(255, 255, 255, 0.02) 80%,
            transparent 100%);
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    opacity: 0.8;
    box-shadow: 0 0 15px rgba(116, 172, 223, 0.3);
}

/* --- Fixture del DT --- */
.mundial-page .fixture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.mundial-page .fixture-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mundial-page .fixture-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.mundial-page .fixture-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mundial-page .fixture-card:hover .fixture-image img {
    transform: scale(1.05);
}

.mundial-page .fixture-info {
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mundial-page .fixture-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.mundial-page .fixture-card:hover {
    transform: translateY(-10px) !important;
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.mundial-page .fixture-card:hover::before {
    transform: scaleX(1);
}

.mundial-page .fixture-phase {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--accent-color);
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.mundial-page .fixture-incluye {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
    line-height: 1.5;
}

.mundial-page .fixture-card h3 {
    font-size: 1.5rem;
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: none;
}

/* --- Promos Section --- */
.mundial-page .promos-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
}

.mundial-page .promo-goles {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
    padding: 3rem;
}

.mundial-page .promo-goles-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('mundial/img-mundial/banner_goles.webp');
    background-size: cover;
    background-position: center;
    z-index: -1;
    transition: transform 0.7s ease;
}

.mundial-page .promo-goles:hover .promo-goles-bg {
    transform: scale(1.05);
}

.mundial-page .promo-goles-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 100%);
    z-index: -1;
}

.mundial-page .promo-content h3 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.mundial-page .promo-content p {
    font-size: 1.2rem;
    max-width: 400px;
}

.mundial-page .promo-rewards {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.mundial-page .reward-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}

.mundial-page .reward-card.reward-bandera {
    background-image: linear-gradient(90deg, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, 0.95) 45%, rgba(20, 20, 20, 0.2) 100%), url('mundial/img-mundial/reward_bandera.webp');
}

.mundial-page .reward-card.reward-camiseta {
    background-image: linear-gradient(90deg, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, 0.95) 45%, rgba(20, 20, 20, 0.2) 100%), url('mundial/img-mundial/reward_camiseta.webp');
}

.mundial-page .reward-card:hover {
    transform: scale(1.02) !important;
    border-color: var(--primary-color);
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.15);
}

.mundial-page .reward-card h4 {
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 2;
    max-width: 65%;
}

.mundial-page .reward-card p {
    font-size: 1.1rem;
    color: var(--text-color);
    position: relative;
    z-index: 2;
    max-width: 65%;
}

/* --- Packs Grid --- */
.mundial-page .packs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2rem;
}

.mundial-page .pack-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    height: 100%;
    cursor: default;
    flex-direction: column;
}

.mundial-page .pack-card.has-product {
    cursor: pointer;
}

.mundial-page .pack-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 175, 55, 0.15);
}

.mundial-page .pack-image {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    position: relative;
}

.mundial-page .pack-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.3);
    transition: transform 0.7s ease;
}

.mundial-page .pack-card:hover .pack-image img {
    transform: scale(1.45);
}

.mundial-page .pack-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.mundial-page .pack-title {
    font-size: 1rem;
    margin-bottom: 0.8rem;
    letter-spacing: 0.5px;
}

.mundial-page .pack-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 1.2rem;
    min-height: 50px;
}

.mundial-page .pack-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 1.2rem;
    margin-top: auto;
    gap: 0.8rem;
}

.mundial-page .pack-tag {
    background-color: rgba(212, 175, 55, 0.1);
    color: var(--primary-color);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Precio y botón comprar dentro de pack-card */
.mundial-page .pack-price {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    font-family: var(--font-body);
}

.mundial-page .pack-btn-buy {
    background: var(--accent-color);
    color: #fff;
    border: none;
    width: auto !important;
    height: auto !important;
    padding: 0.5rem 1.4rem;
    border-radius: 50px !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.25s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.mundial-page .pack-btn-buy:hover {
    background: #da4837;
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(197, 65, 50, 0.5);
}

.mundial-page .pack-btn-buy svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* --- Modal Sorteo --- */
.mundial-page .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.mundial-page .modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mundial-page .modal-container {
    position: relative;
    width: 90%;
    max-width: 750px;
    transform: translateY(50px) scale(0.95);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mundial-page .modal-overlay.active .modal-container {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.mundial-page .promo-mundial-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #74ACDF 0%, #ffffff 50%, #74ACDF 100%);
    color: #050505;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(116, 172, 223, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.mundial-page .modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;
}

.mundial-page .modal-close:hover {
    background: var(--primary-color);
    color: #000;
}

.mundial-page .sorteo-wrapper {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.mundial-page .sorteo-image {
    flex: 1;
    min-height: 500px;
    background-image: url('mundial/img-mundial/combo_parrillero_sorteo.webp');
    background-size: cover;
    background-position: center;
}

.mundial-page .sorteo-content {
    flex: 1;
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mundial-page .sorteo-content h2 {
    font-size: 2rem;
    margin-bottom: 0.8rem;
}

.mundial-page .sorteo-content p {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 1.2rem;
}

.mundial-page .sorteo-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.mundial-page .form-group input {
    width: 100%;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    padding: 0.8rem 1.2rem;
    border-radius: 10px;
    color: white;
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}

.mundial-page .form-group input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.mundial-page .form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.mundial-page .sorteo-form .btn-primary {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    padding: 0.9rem;
}

/* --- Toast Notification --- */
.mundial-page .toast-notification {
    position: fixed;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--card-bg);
    border: 1px solid var(--primary-color);
    border-radius: 16px;
    padding: 1.2rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    z-index: 10000;
    opacity: 0;
    width: 90%;
    max-width: 450px;
}

.mundial-page .toast-content h4 {
    color: var(--primary-color);
    margin-bottom: 0.3rem;
    font-size: 1.2rem;
}

.mundial-page .toast-content p {
    color: #fff;
    margin: 0;
    font-size: 1rem;
}

/* --- Footer --- */
.mundial-page .main-footer {
    background-color: #000;
    padding: 4rem 0;
    text-align: center;
}

.mundial-page .footer-logo {
    margin-bottom: 2rem;
}

.mundial-page .footer-logo img {
    height: 50px;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.mundial-page .footer-logo img:hover {
    opacity: 1;
}

.mundial-page .footer-links {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* --- Sección Ofertas Mundial (mismas ofertas backend con badge mundial) --- */
.mundial-page .ofertas-mundial-section {
    background-color: var(--bg-lighter);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .mundial-page .hero-wave svg {
        height: 70px;
    }

    .mundial-page .hero-title {
        font-size: 4rem;
    }

    .mundial-page .promos-grid {
        grid-template-columns: 1fr;
    }

    .mundial-page .sorteo-wrapper {
        flex-direction: column;
    }

    .mundial-page .sorteo-image {
        min-height: 300px;
    }

    .mundial-page .sorteo-content {
        padding: 3rem 2rem;
    }

    .mundial-page .sorteo-content h2 {
        font-size: 2.4rem;
    }
}

@media (max-width: 768px) {
    .mundial-page .hero-wave svg {
        height: 45px;
    }

    .mundial-page .hero-title {
        font-size: 3rem;
    }

    .mundial-page .hero-subtitle {
        font-size: 1.2rem;
    }

    .mundial-page .section {
        padding: 5rem 0;
    }

    .mundial-page .section-header h2 {
        font-size: 2.2rem;
    }

    .mundial-page .reward-card {
        padding: 1.5rem;
    }

    .mundial-page .reward-card h4 {
        font-size: 1.5rem;
    }

    .mundial-page .promo-goles {
        padding: 2rem;
        min-height: 300px;
    }

    .mundial-page .promo-content h3 {
        font-size: 2rem;
    }
    .mundial-page .packs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .mundial-page .packs-grid .product-card {
        min-width: 0;
    }


    .mundial-page .pack-title {
        font-size: 1.4rem;
    }

    .mundial-page .pack-desc {
        font-size: 1rem;
    }

    .mundial-page .pack-info {
        padding: 1.5rem;
    }

    .mundial-page .sorteo-image {
        display: none;
    }

    .mundial-page .sorteo-content {
        padding: 2rem 1.5rem;
    }

    .mundial-page .sorteo-content h2 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }

    .mundial-page .sorteo-content p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Aislar el theme oscuro del mundial del drawer/modal/checkout (sistema general).
   El body.mundial-page tiene color blanco y --text-muted gris claro: eso hace
   ilegible el drawer (texto blanco sobre fondo blanco). Restauramos colores
   originales del sistema dentro de esos overlays.
   ═══════════════════════════════════════════════════════════════════════════ */

.mundial-page #product-drawer,
.mundial-page #modal,
.mundial-page #order-review {
    color: #2a2a2a;
    --text-muted: #555555;
}

.mundial-page #product-drawer .drawer-title,
.mundial-page #product-drawer .drawer-section-title,
.mundial-page #product-drawer .variant-info .weight {
    color: #111;
}

.mundial-page #product-drawer .drawer-desc,
.mundial-page #product-drawer .drawer-description,
.mundial-page #product-drawer .presentacion {
    color: #555;
}

.mundial-page #product-drawer .variant-info .price {
    color: #888;
}

/* Cart modal: el cart del sistema tiene fondo oscuro y usa --accent-gold (verde
   clarito) para textos clave. Mantenemos esos colores intactos — no overrides. */

/* Checkout view: comparte el fondo oscuro del modal y usa --accent-gold para
   títulos. Mantenemos los colores del sistema — sin overrides. */

/* Order Review (fondo claro --bg #f5f5f0, texto oscuro --text-primary) */
.mundial-page #order-review .review-h1,
.mundial-page #order-review .review-block-title,
.mundial-page #order-review .review-totals-final,
.mundial-page #order-review .review-info {
    color: #111;
}

.mundial-page #order-review .review-sub,
.mundial-page #order-review .review-totals-row,
.mundial-page #order-review .review-trust {
    color: #555;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Fixes mobile / overflow / header on scroll
   ═══════════════════════════════════════════════════════════════════════════ */

/* Evitar scroll horizontal indeseado */
html:has(body.mundial-page),
body.mundial-page {
    overflow-x: hidden;
    max-width: 100vw;
}

/* style.css del sistema define .section-header como display:flex (es para el
   header de gondolas con título + tag). Acá lo forzamos a stack vertical y
   centrado para que el <p> descriptivo vaya DEBAJO del <h2>. */
.mundial-page .section .section-header,
.mundial-page .ofertas-mundial-section .section-header {
    display: block !important;
    text-align: center;
    padding: 0;
    margin-bottom: 4rem;
    justify-content: initial;
    align-items: initial;
}

.mundial-page .section .section-header h2,
.mundial-page .ofertas-mundial-section .section-header h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.mundial-page .section .section-header p,
.mundial-page .ofertas-mundial-section .section-header p {
    color: var(--text-muted);
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
}

/* Header: al hacer scroll oculta el marquee y se acopla al borde superior */
.mundial-page .marquee-wrapper-top {
    transition: transform 0.35s ease;
}

.mundial-page:has(.main-header.scrolled) .marquee-wrapper-top {
    transform: translateY(-100%);
}

.mundial-page .main-header.scrolled {
    top: 0;
}

/* Mobile específico */
@media (max-width: 768px) {

    .mundial-page .section .section-header,
    .mundial-page .ofertas-mundial-section .section-header {
        margin-bottom: 2.5rem;
        padding: 0 1rem;
    }

    .mundial-page .section .section-header h2,
    .mundial-page .ofertas-mundial-section .section-header h2 {
        font-size: 2.2rem;
    }

    .mundial-page .section .section-header p,
    .mundial-page .ofertas-mundial-section .section-header p {
        font-size: 1rem;
    }

    /* Marquee más compacto en mobile */
    .mundial-page .marquee-wrapper-top {
        font-size: 0.7rem;
        padding: 0.25rem 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Subnav: chips horizontales con scroll-spy. Solo visible cuando el header
   se acopla al borde superior (después del hero).
   ═══════════════════════════════════════════════════════════════════════════ */

.mundial-page .mundial-subnav {
    position: fixed;
    top: -80px;
    left: 0;
    right: 0;
    z-index: 99;
    background: rgba(5, 5, 5, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 0;
    transition: top 0.35s ease;
}

.mundial-page:has(.main-header.scrolled) .mundial-subnav {
    top: 80px;
}

.mundial-page .mundial-subnav-scroll {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 0 1rem;
    max-width: var(--container-width);
    margin: 0 auto;
    scrollbar-width: none;
}

.mundial-page .mundial-subnav-scroll::-webkit-scrollbar {
    display: none;
}

.mundial-page .mundial-subnav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 0.4rem 1rem;
    border-radius: 24px;
    white-space: nowrap;
    border: 1px solid var(--border-color);
    background: rgba(20, 20, 20, 0.6);
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.mundial-page .mundial-subnav-link:hover {
    color: #fff;
    border-color: rgba(212, 175, 55, 0.5);
}

.mundial-page .mundial-subnav-link.active {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(197, 65, 50, 0.35);
}

@media (max-width: 768px) {
    .mundial-page:has(.main-header.scrolled) .mundial-subnav {
        top: 72px;
    }

    .mundial-page .mundial-subnav {
        padding: 0.6rem 0;
    }

    .mundial-page .mundial-subnav-scroll {
        justify-content: center;
    }

    .mundial-page .mundial-subnav-link {
        font-size: 0.72rem;
        padding: 0.4rem 0.9rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Botón flotante "Volver" (esquina inferior izquierda)
   ═══════════════════════════════════════════════════════════════════════════ */

.mundial-page .mundial-back-btn {
    position: fixed;
    bottom: 1.2rem;
    left: 1.2rem;
    z-index: 200;
    background: #c35527;
    border: 1px solid #c35527;
    color: #fff;
    padding: 0.6rem 1.1rem;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease, background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 18px rgba(195, 85, 39, 0.55);
}

.mundial-page .mundial-back-btn.visible {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.mundial-page .mundial-back-btn:hover {
    background: #d96234;
    border-color: #d96234;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(195, 85, 39, 0.7);
}

.mundial-page .mundial-back-btn svg {
    flex-shrink: 0;
}

/* ── Indicador de scroll ─────────────────────────────────────── */
.mundial-page .scroll-indicator {
    position: fixed;
    bottom: 1.8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.35s ease;
    animation: scroll-bounce 1.8s ease-in-out infinite;
}

.mundial-page .scroll-indicator.hidden {
    opacity: 0;
}

@keyframes scroll-bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(6px);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile: cart flotante esquina inferior derecha + logo centrado en header
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .mundial-page .header-content {
        justify-content: center;
    }

    .mundial-page .mundial-cart-btn {
        position: fixed;
        bottom: 1.2rem;
        right: 1.2rem;
        z-index: 200;
        background: #b63c2e;
        border: 1px solid #c35527;
        box-shadow: 0 6px 18px rgba(195, 85, 39, 0.55);
    }

    .mundial-page .mundial-back-btn {
        padding: 0.5rem 0.85rem;
        font-size: 0.7rem;
        bottom: 1rem;
        left: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modo revisión de pedido en /mundial
   La web principal usa #content-wrapper para ocultar todo menos el order-review.
   El mundial no tiene ese wrapper, así que ocultamos los hijos directos del
   body (excepto order-review/modal/product-drawer) cuando se activa el modo.
   Esta regla SOLO aplica si el body tiene .mundial-page → no afecta al sitio
   principal.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mundial-page.review-mode>*:not(#order-review):not(#modal):not(#product-drawer) {
    display: none !important;
}

body.mundial-page.review-mode #order-review {
    display: block !important;
}

/* Asegurar fondo claro y scroll del body en modo revisión */
body.mundial-page.review-mode {
    background: #f5f5f0;
    overflow: auto;
}

/* ==========================================================================
   ESPECIAL CERDO - NUEVOS ESTILOS
   ========================================================================== */

/* Divider */
.divider-cerdo {
    border: none;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    margin: 40px 0;
    opacity: 0.6;
}

/* Hero Cerdo */
.hero-cerdo {
    min-height: 80vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-overlay-cerdo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8));
    z-index: 1;
}

.hero-cerdo .hero-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    max-width: 800px;
    /* Sin esto, ".hero-content { flex: none }" del hero principal (definida
       sin scope en style.css, sólo para su propio mobile) se filtra acá:
       el ítem deja de encoger, queda más ancho que el viewport y
       justify-content:center lo centra recortado por igual en ambos lados. */
    flex: 1 1 auto;
    min-width: 0;
}

.hero-cerdo .hero-title {
    font-size: 5rem;
    color: #fff;
    margin-bottom: 1rem;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
}

.hero-cerdo .hero-accent {
    color: var(--primary-color);
}

.hero-cerdo .hero-subtitle {
    color: #f0f0f0;
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.hero-cerdo .hero-eyebrow {
    color: #fff;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    display: block;
}

/* Pack Especial Promocionado */
.pack-especial-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: #f2f2eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
}

.pack-especial-img {
    background-size: cover;
    background-position: center;
    min-height: 400px;
    position: relative;
}

.pack-especial-img .discount-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 800;
    font-size: 1.5rem;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(195, 85, 39, 0.4);
}

.pack-especial-info {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pack-especial-info h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 2.5rem;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.pack-especial-desc {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.pack-especial-includes {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.pack-especial-includes li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: var(--text-color);
}

.pack-especial-includes li i {
    color: var(--primary-color);
    margin-right: 10px;
}

.pack-especial-price {
    background: var(--bg-lighter);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.old-price {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 1rem;
    display: block;
    margin-bottom: 5px;
}

.current-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
}

.price-note {
    font-size: 0.9rem;
    color: var(--primary-color);
    margin-top: 5px;
    font-weight: 600;
}

.pack-disclaimer {
    margin-top: 1rem;
    color: var(--text-muted);
}

/* Banner Cerdo */
.promo-banner-cerdo {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    min-height: 350px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 40px;
}

.promo-banner-cerdo .promo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
}

.promo-banner-cerdo .promo-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.promo-banner-cerdo h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 1rem;
}

.promo-banner-cerdo p {
    color: #f0f0f0;
    font-size: 1.1rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .pack-especial-container {
        grid-template-columns: 1fr;
    }

    .pack-especial-img {
        min-height: 250px;
    }

    .pack-especial-info {
        padding: 20px;
    }

    /* .mundial-page .hero fija height:100vh y por especificidad le gana al
       min-height:80vh de .hero-cerdo — nunca llegaba a usarse, así que el
       hero quedaba siempre a pantalla completa sin importar el contenido,
       de ahí el hueco grande arriba. Con height:auto vuelve a mandar el
       min-height ya declarado más abajo, y el hueco baja a lo esperado. */
    .hero.hero-cerdo {
        height: auto;
        /* Ambos leaks también empujaban el contenido hacia abajo del
           centro real: ".hero { padding-top:100px; padding-bottom:30px }"
           (pensado para compensar el header fijo del sitio principal, acá
           de sobra) y ".mundial-page .hero-content { margin-top:50px }"
           (del hero genérico de mundial, sin relación con este).

           padding-top acá NO es decorativo: el ticker+navbar son fixed
           (~97px) y se superponen arriba del hero, así que hace falta un
           mínimo real para no tapar el texto. En pantallas bajas (Galaxy
           S8, iPhone SE, apaisado) el centrado por vh solo no alcanza para
           garantizarlo — probado, quedaba literalmente debajo del header.
           112px = 97px del header + ~15px de aire, siempre alcanza. */
        padding-top: 112px;
        padding-bottom: 32px;
        min-height: 62vh;
    }

    .hero-cerdo .hero-content {
        margin-top: 0;
    }

    .hero-cerdo .hero-eyebrow {
        font-size: 0.75rem;
    }

    /* !important porque ".hero h1 { font-size: 2.2rem !important }" en
       style.css (para el hero principal de Casa Raza, dentro de @media
       max-width:1023px) también matchea acá: nuestra section lleva las
       clases "hero hero-cerdo" a la vez. Con normal !important vs
       !important, gana el selector más específico — dos clases contra
       una clase + tag — así que esto sí se aplica.

       2.5rem, no más: "ESPECIAL" es una sola palabra sin espacio donde
       partir, y a 3.5rem medía 267px — más ancho que la caja disponible
       en cualquier pantalla de 375px o menos (iPhone SE, la mayoría de
       los Android estándar), así que se salía del H1 en vez de quedar
       centrada. Medido: a 2.5rem entra con margen hasta los 320px, el
       piso estándar de diseño responsive. Este problema ya existía antes
       con el 3rem original (tampoco entraba a 320px) — la suba a 3.5rem
       sólo lo hizo visible en más dispositivos. */
    .hero-cerdo .hero-title {
        font-size: 2.5rem !important;
    }

    /* "Especial" arriba, "Cerdo" abajo — quiebre explícito en vez de
       depender del wrap natural del navegador a este tamaño de fuente. */
    .hero-cerdo .hero-title .hero-accent {
        display: block;
    }

    .hero-cerdo .hero-subtitle {
        font-size: 1rem;
        padding: 0 4px;
    }

    .promo-banner-cerdo {
        padding: 20px;
        min-height: 300px;
    }

    .promo-banner-cerdo h3 {
        font-size: 2rem;
    }
}

/* === OVERRIDES FOR CONTRAST & BANNER SIZE === */
.pack-especial-info h3 {
    color: #1a1a1a !important;
}

.pack-especial-desc {
    color: #4a4a4a !important;
}

.pack-especial-includes li {
    color: #333333 !important;
}

.pack-especial-includes li i {
    color: #C35527 !important;
}

.pack-especial-price {
    background: #1a1a1a !important;
    border: none !important;
}

.pack-especial-price .old-price {
    color: #a0a0a0 !important;
}

.pack-especial-price .current-price {
    color: #ffffff !important;
}

.pack-especial-price .price-note {
    color: #C35527 !important;
}

.pack-especial-img {
    min-height: 300px !important;
    /* Made smaller */
}

.pack-especial-info {
    padding: 30px !important;
}

/* === OVERRIDES V2 === */
.mundial-subnav {
    border-top: none !important;
}

.btn-primary,
.btn-buy,
.pack-btn-buy,
.mundial-cart-btn {
    background-color: #C35527 !important;
    border-color: #C35527 !important;
}

.btn-primary:hover,
.btn-buy:hover,
.pack-btn-buy:hover {
    background-color: #A3431D !important;
}

.pack-especial-img {
    min-height: 200px !important;
    /* Smaller banner */
}

.pack-especial-info {
    padding: 20px !important;
}

.pack-especial-info h3 {
    font-size: 2rem !important;
    /* Slightly smaller title */
}

.pack-especial-desc {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
}

.pack-especial-includes li {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
}

.pack-especial-price {
    padding: 15px !important;
    margin-bottom: 1rem !important;
}

/* ── Packs de Cerdo Grid ─────────────────────────────────────── */
.packs-cerdo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.pack-cerdo-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pack-cerdo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.pack-cerdo-img {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
}

.pack-cerdo-body {
    padding: 1.4rem 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pack-cerdo-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 0.5rem;
}

.pack-cerdo-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.pack-cerdo-includes {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pack-cerdo-includes li {
    font-size: 0.875rem;
    color: var(--text-color);
    padding-left: 1.2em;
    position: relative;
}

.pack-cerdo-includes li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 700;
}

.pack-cerdo-saving {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background: rgba(195, 85, 39, 0.12);
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35em 0.75em;
    border-radius: 20px;
    margin-bottom: 1.2rem;
    width: fit-content;
}

.btn-pack-cerdo {
    display: block;
    width: 100%;
    padding: 0.85rem;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.2s, opacity 0.2s;
    margin-top: auto;
}

.btn-pack-cerdo:hover {
    background: #a84520;
}

@media (max-width: 900px) {
    .packs-cerdo-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}