@font-face{font-family:Rowdies;src:url('/fonts/Rowdies-Light.woff2') format('woff2'),url('/fonts/Rowdies-Light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Rowdies;src:url('/fonts/Rowdies-Regular.woff2') format('woff2'),url('/fonts/Rowdies-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Rowdies;src:url('/fonts/Rowdies-Bold.woff2') format('woff2'),url('/fonts/Rowdies-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}

html,body{background:#000;color:#fff;min-height:100%;margin:0;padding:0;box-sizing:border-box;font-family:'Rowdies',Arial,sans-serif;font-weight:400; overflow-x: hidden;}
*,*:before,*:after{box-sizing:inherit}
strong,b{font-weight:700}
a { color: inherit; text-decoration: none; }
button,input,textarea,select,.buy-btn {font-family:inherit;font-size:1em}
input,textarea,select{font-family:'Rowdies',Arial,sans-serif}

.main-header{width:100%;background:#181a20;color:#fff;padding:0;box-shadow:0 2px 22px #000a;border-bottom:2px solid #23242a;position:sticky;top:0;z-index:1000;height:100px}
.header-flex{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 32px 0 18px;max-width:1600px;margin:0 auto;flex-wrap:nowrap}
.header-logo img{height:100%;max-height:90px;width:auto;display:block}
.search-bar-container{flex:1;display:flex;justify-content:center;align-items:center;min-width:120px;padding:0 20px}
.search-bar-form{width:100%;max-width:400px;display:flex;align-items:center;position:relative}
.search-bar-input{width:100%;padding:7px 18px 7px 38px;border-radius:999px;border:1.5px solid #32343c;background:#23242a;color:#fff;outline:none;box-shadow:0 2px 13px #1115;transition:box-shadow .15s,background .18s,border-color .18s}
.search-bar-input:focus{box-shadow:0 4px 24px #000b;background:#23242f;border-color:#555}
.search-bar-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:1.1em;color:#bbb;pointer-events:none}
.header-actions{display:flex;align-items:center;gap:20px}
.header-cart{display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;padding:5px;margin-left:10px}
.header-cart svg{width:28px;height:28px;display:block;color:#fff;transition:color .2s,transform .15s}
.header-cart:hover svg{transform:scale(1.1);color:#ddd}
.header-login-avatar{display:flex;align-items:center}

.store-container { max-width: 1200px; margin: 38px auto; padding: 24px; width: 100%; }
.detalle-producto-main { flex: 1; display: flex; flex-direction: row; align-items: flex-start; gap: 54px; margin: 0; }
.detalle-img-container { flex: 0 0 380px; display: flex; flex-direction: column; align-items: center; background: transparent; padding: 0; position: relative; }
.detalle-img { width: 340px; height: 340px; object-fit: contain; border-radius: 30px; background: #181818; border: 2.5px solid #222; margin-bottom: 28px; box-shadow: 0 8px 50px #000a; z-index: 1; }
.detalle-label-bar { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 20px; justify-content: flex-start; align-items: center; width: 100%; min-height: 48px; }
.detalle-label { font-family: 'Rowdies', Arial, sans-serif; font-size: 1.28em; font-weight: bold; padding: 11px 38px; border-radius: 15px; opacity: 0.98; border: 2.5px solid #fff; background: rgba(32,32,32,0.18); box-shadow: 0 4px 16px #0008; color: #fff; text-align: center; letter-spacing: 1px; text-shadow: 0 1px 5px #000a; backdrop-filter: blur(1px); min-width: 150px; display: inline-block; }
.detalle-label.mejor-oferta { border-color: #fc4; color: #fc4; background: rgba(32,32,0,0.17); }
.detalle-label.mas-vendido { border-color: #3c4; color: #3c4; background: rgba(32,48,32,0.13); }
.detalle-main-info { flex: 1; display: flex; flex-direction: column; gap: 13px; min-width: 0; margin-top: 22px; }
.detalle-titulo { font-size: 2.4em; font-weight: 700; color: #fff; margin-bottom: 0; letter-spacing: 0.02em; line-height: 1.1; font-family: 'Rowdies', Arial, sans-serif; text-shadow: 0 2px 10px #000b; word-break: break-word; }
.detalle-titulo .ogrinas-number { color: #fff; font-size: 1.25em; font-family: 'Rowdies', Arial, sans-serif; font-weight: 700; letter-spacing: 1px; text-shadow: 0 2px 12px #000c; background: none; padding: 0; margin: 0; display: inline; }
.detalle-precio { font-size: 1.65em; font-weight: 700; color: #fff; margin: 0 0 2px 0; text-shadow: 0 2px 10px #0006; font-family: 'Rowdies', Arial, sans-serif; }
.detalle-bonus { color: #8cf9dc; font-weight: 700; margin-bottom: 2px; font-size: 1.15em; font-family: 'Rowdies', Arial, sans-serif; }
.detalle-total { font-size: 1.17em; margin-bottom: 11px; color: #aee9c6; font-family: 'Rowdies', Arial, sans-serif; }
.detalle-promocion { background: #ffd700; color: #222; font-weight: bold; padding: 8px 20px; display: inline-block; border-radius: 9px; margin-bottom: 13px; font-size: 1.09em; font-family: 'Rowdies', Arial, sans-serif; box-shadow: 0 2px 8px 0 rgba(255,224,102,0.13); }
.detalle-descripcion { margin: 10px 0 20px 0; font-size: 1.13em; color: #b9c2d2; line-height: 1.5; letter-spacing: 0.01em; font-family: 'Rowdies', Arial, sans-serif; display: flex; align-items: flex-start; gap: 14px; border-radius: 13px; padding: 18px 24px; box-shadow: 0 2px 16px #0024; min-height: 54px; max-width: 800px; }
.detalle-descripcion svg { flex-shrink: 0; margin-top: 2px; width: 32px; height: 32px; color: #37c2e6; filter: drop-shadow(0 2px 6px #0fc2ff33); }
.detalle-descripcion-text { display: block; min-width: 0; word-break: break-word; white-space: pre-line; font-size: 1.09em; color: #b9c2d2; font-family: 'Rowdies', Arial, sans-serif; }
.detalle-compra-btn { margin: 0 auto; display: block; margin-bottom: 16px; margin-top: 32px; background: linear-gradient(90deg,#23242a 60%, #181a20 100%); color: #fff; border: none; border-radius: 9px; padding: 16px 44px; font-size: 1.25em; font-weight: 900; cursor: pointer; box-shadow: 0 2px 16px #0007; letter-spacing: 1.1px; text-shadow: 0 1px 0 #222; transition: background .16s, box-shadow .16s, transform .1s, color .18s; font-family: 'Rowdies', Arial, sans-serif; outline: none; text-decoration: none !important; }
.detalle-compra-btn:hover, .detalle-compra-btn:focus { background: #fff !important; color: #181a20 !important; transform: scale(1.04); box-shadow: 0 8px 28px #000b; text-shadow: none; }

/* Estilos para la sección de contenido del paquete */
.contenido-paquete-seccion {
    margin-top: 20px;
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(24, 26, 32, 0.7);
    border-radius: 15px;
    border: 1px solid #23242a;
    box-shadow: 0 4px 18px #0005;
}
.contenido-paquete-titulo {
    font-size: 1.5em;
    color: #fff;
    margin-bottom: 20px;
    text-align: left;
    border-bottom: 1px solid #32343c;
    padding-bottom: 10px;
}
.subtitulo-contenido-paquete {
    font-size: 1.25em;
    color: #e0e4ea;
    margin-top: 15px;
    margin-bottom: 10px;
}
.subtitulo-contenido-paquete:first-child {
    margin-top: 0;
}
.lista-articulos-paquete {
    list-style: none;
    padding-left: 0;
    margin-bottom: 15px;
}
.lista-articulos-paquete li {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 5px;
    border-bottom: 1px dashed #2a2c33;
    font-size: 1.05em;
}
.lista-articulos-paquete li:last-child {
    border-bottom: none;
}
.lista-articulos-paquete img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 5px;
    background: #23242a;
    padding: 3px;
    flex-shrink: 0;
}
.lista-articulos-paquete .nombre-articulo {
    flex-grow: 1;
    color: #cdd2da;
}
.lista-articulos-paquete .nombre-articulo a {
    color: #cdd2da;
    text-decoration: none;
}
.lista-articulos-paquete .nombre-articulo a:hover {
    color: #fff;
    text-decoration: underline;
}
.lista-articulos-paquete .cantidad-articulo {
    font-weight: bold;
    color: #fff;
    background: #32343c;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.9em;
}
.descripcion-grupo-eleccion {
    font-size: 0.95em;
    color: #9aa0aa;
    margin-bottom: 10px;
    font-style: italic;
    padding-left: 5px;
}
.opcion-elegible-item {
    padding: 8px 5px;
    background: rgba(42, 44, 51, 0.1);
    border-radius: 8px;
    cursor: default;
    margin-bottom: 5px;
}
.opcion-elegible-item:hover {
    background: rgba(50, 52, 59, 0.3);
}
.opcion-elegible-item input[type="checkbox"],
.opcion-elegible-item input[type="radio"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #37c2e6;
    cursor: pointer;
}
.opcion-elegible-item label {
    color: #b9c2d2;
    cursor: pointer;
    flex-grow: 1;
    display: flex;
    align-items: center;
}
.opcion-elegible-item label:hover {
    color: #fff;
}

.relacionados-section { margin-top: 60px; }
.relacionados-title { margin-bottom: 24px; font-family: 'Rowdies', Arial, sans-serif; font-size: 2em; color: #fff; text-align: center; text-shadow: 0 2px 10px #000c; letter-spacing: 1px; }
.relacionados-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-bottom: 40px; justify-items: start; width: 100%; transition: opacity .3s ease-in-out; }
.relacionados-grid .no-articles-message{color:#aaa;font-style:italic;text-align:center;padding:40px 20px;grid-column:1 / -1;font-size:1.1em}

.pack-card{background:linear-gradient(145deg,#181a20 90%,#23242a 100%);border:2px solid #32343c;border-radius:16px;box-shadow:0 6px 25px #0009,0 1px 0 #23242a;padding:20px 15px 18px 15px;width:100%;box-sizing:border-box;position:relative;text-align:center;transition:transform .18s,box-shadow .18s,border-color .18s;overflow:visible;display:flex;flex-direction:column;align-items:center;justify-content:space-between;z-index:1;margin:0;height:100%}
.pack-card.mejor-oferta{border-color:#fc4;box-shadow:0 0 20px #fc47,0 6px 25px #0009}
.pack-card.mas-vendido{border-color:#3c4;box-shadow:0 0 20px #3c47,0 6px 25px #0009}
.pack-card:hover{transform:scale(1.03) rotate(-.5deg);box-shadow:0 12px 40px #000b,0 1px 0 #fff2;border-color:#999;z-index:5}
.pack-card.mejor-oferta:hover{border-color:#fd5;box-shadow:0 8px 30px #fc4a,0 0 0 3px #fd53,0 12px 40px #000b}
.pack-card.mas-vendido:hover{border-color:#4d5;box-shadow:0 8px 30px #3c4a,0 0 0 3px #4d53,0 12px 40px #000b}
.pack-img-main,.pack-img-placeholder{width:140px;height:140px;margin-bottom:15px;margin-top:40px;display:block;flex-shrink:0;object-fit:contain}
.pack-img-placeholder{display:flex;align-items:center;justify-content:center;color:#555;border:1px dashed #444;border-radius:8px;font-size:.8em}
.pack-ogrinas{font-size:1.6em;color:#fff;margin:8px 0;text-shadow:0 1px 8px #000a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;min-height:2.5em;line-height:1.1}
.pack-ogrinas .ogrinas-number{display:block;font-weight:700;white-space:nowrap}
.pack-ogrinas .ogrinas-nombre{font-size:.65em;font-weight:400;white-space:normal;display:block;max-width:95%}
.pack-categoria{display:block;font-size:.7em;color:#999;margin-top:4px;min-height:1em;text-transform:uppercase;letter-spacing:.3px;font-weight:300}
.pack-label-bar{position:absolute;top:-2px;left:-2px;width:calc(100% + 4px);min-height:34px;display:flex;align-items:stretch;justify-content:stretch;z-index:10;pointer-events:none;border-radius:16px 16px 0 0;overflow:hidden;box-shadow:0 2px 12px #0007;border-bottom:none;transition:box-shadow .18s,border-color .18s}
.pack-label-bar span{flex:1 1 0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1em;letter-spacing:.5px;margin:0;padding:8px 5px;background:#23242a;color:#fff;border:2px solid #32343c;border-bottom:none;text-shadow:0 1px 0 #0009;opacity:.98;pointer-events:auto;text-align:center;transition:background .18s,border-color .18s,color .18s}
.pack-label-bar .mas-vendido{background:#303d30;border-color:transparent;color:#e0ffe0}
.pack-label-bar .mejor-oferta{background:#3a302a;border-color:transparent;color:#fff5e0}
.pack-card.mejor-oferta .pack-label-bar{box-shadow:0 0 20px #fc47,0 6px 25px #0009;border-color:#fc4}
.pack-card.mas-vendido .pack-label-bar{box-shadow:0 0 20px #3c47,0 6px 25px #0009;border-color:#3c4}
.pack-precio{font-size:1.1em;color:#fff;margin:10px 0 8px 0;letter-spacing:.8px;text-shadow:0 1px 0 #0005;font-weight:400}
.pack-bonus{display:block;font-size:.9em;color:#8cf9dc;font-weight:700;margin-top:5px;text-shadow:0 1px 0 #0008}
.pack-total{display:block;font-size:.95em;color:#bbb;margin-top:6px;text-shadow:0 1px 0 #fff1;font-weight:400}
.pack-promocion{display:block;margin-top:10px;background:#23242a;color:#fff;font-size:.85em;padding:5px 8px;border-radius:4px;font-weight:700;border:1px solid #32343c;animation:promo-blink 1.1s linear infinite alternate;box-shadow:0 1px 8px #0004}
@keyframes promo-blink{0%{opacity:1}100%{opacity:.81}}
.pack-spacer{display:block;flex-grow:1};color:#fff;border:none;border-radius:7px;padding:10px 20px;font-size:1em;font-weight:700;cursor:pointer;box-shadow:0 2px 12px #0006;letter-spacing:.8px;text-shadow:0 1px 0 #222;transition:background .16s,box-shadow .16s,transform .1s,color .18s;outline:none;text-decoration:none!important;align-self:stretch;max-width:200px;margin-left:auto;margin-right:auto;display:inline-block;width:auto}
.buy-btn:hover,.buy-btn:focus{background:#fff!important;color:#181a20!important;transform:scale(1.03);box-shadow:0 6px 20px #000a;text-shadow:none}

@media (max-width: 900px) {
    .store-container { padding: 15px; }
    .detalle-producto-main { flex-direction: column; gap: 18px; }
    .detalle-img-container { width: 100%; max-width: 350px; margin: 0 auto; }
    .detalle-img { width: 100%; height: auto; max-width: 340px; max-height: 340px; }
    .detalle-titulo { font-size: 1.8em; }
    .detalle-precio { font-size: 1.4em; }
    .detalle-compra-btn { padding: 14px 30px; font-size: 1.1em; }
    .detalle-descripcion { font-size: 1em; padding: 14px 18px; }
    .relacionados-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px;}
}

@media (max-width: 700px) {
     .main-header{padding:0 8px;height:70px}
     .header-flex{padding:0 5px;height:100%;gap:10px;justify-content:space-between}
     .header-logo img{height:55px}
     .search-bar-container{display:none}
     .header-actions{gap:8px;margin-right:0}
     .header-cart svg{width:24px;height:24px}

    .store-container { padding: 10px; }
    .detalle-producto-main {
        align-items: center;
        gap: 15px;
    }
    .detalle-img-container {
        max-width: 280px;
        width: 100%;
    }
    .detalle-img {
        max-width: 250px;
        max-height: 250px;
    }
    .detalle-main-info {
        text-align: center;
        width: 100%;
        max-width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        gap: 8px;
    }
    .detalle-label-bar {
        justify-content: center;
        width: auto;
        max-width: 100%;
        gap: 8px;
        margin-bottom: 10px;
    }
    .detalle-label {
         font-size: 1em;
         padding: 8px 20px;
    }
     .detalle-titulo { font-size: 1.6em; }
     .detalle-precio { font-size: 1.3em; }
    .detalle-total {
        margin-bottom: 5px;
    }
    .detalle-promocion {
        margin-bottom: 8px;
        padding: 6px 15px;
        font-size: 1em;
    }
    #form-agregar-carrito {
         width: auto;
         margin-bottom: 0;
         margin-top: 18px;
    }
    .detalle-compra-btn {
        margin-left: 0;
        margin-right: 0;
        padding: 12px 28px;
        font-size: 1.05em;
    }
    .detalle-descripcion {
        text-align: left;
        max-width: 100%;
        font-size: 0.95em;
        padding: 12px 15px;
        margin-top: 10px;
    }
    .detalle-descripcion svg {
        width: 24px;
        height: 24px;
    }

    .relacionados-grid{grid-template-columns:repeat(2,1fr);gap:10px;justify-items:stretch;padding:0;width:100%}
    .pack-card{width:100%;padding:20px 10px 18px 10px;border-width:1.5px;border-radius:15px;box-shadow:0 4px 20px #000a}
    .pack-card.mejor-oferta{border-color:#fc4;box-shadow:0 0 15px #fc45,0 4px 20px #000a}
    .pack-card.mas-vendido{border-color:#3c4;box-shadow:0 0 15px #3c45,0 4px 20px #000a}
    .pack-card:hover{transform:scale(1.015);rotate:none;box-shadow:0 6px 25px #000b;border-color:#777}
    .pack-label-bar{min-height:34px;border-radius:15px 15px 0 0;top:-1.5px;left:-1.5px;width:calc(100% + 3px);overflow:hidden;box-shadow:0 1px 6px #0005;border-bottom:none;transition:box-shadow .18s,border-color .18s}
    .pack-label-bar span{font-size:1em;padding:8px 6px;border-width:1.5px;letter-spacing:.6px;font-weight:700;border-color:#32343c;border-bottom:none;text-shadow:0 1px 0 #000b;background:#23242a;color:#fff;transition:background .18s,border-color .18s,color .18s}
    .pack-card.mejor-oferta .pack-label-bar{box-shadow:0 0 15px #fc45,0 4px 20px #000a;border-color:#fc4}
    .pack-card.mas-vendido .pack-label-bar{box-shadow:0 0 15px #3c45,0 4px 20px #000a;border-color:#3c4}
    .pack-label-bar .mas-vendido{background:#303d30;border-color:transparent;color:#e0ffe0}
    .pack-label-bar .mejor-oferta{background:#3a302a;border-color:transparent;color:#fff5e0}
    .pack-img-main,.pack-img-placeholder{width:100%;max-width:100px;height:100px;margin:35px auto 15px auto}
    .pack-img-placeholder{font-size:.75em;border-radius:8px}
    .pack-ogrinas{font-size:1.3em;gap:1px;margin:6px 0;min-height:auto;font-weight:700}
    .pack-ogrinas .ogrinas-nombre{font-size:.6em;line-height:1.1;max-width:95%;font-weight:400}
    .pack-categoria,.pack-bonus,.pack-total,.pack-promocion,.pack-spacer{display:block}
    .pack-categoria{font-size:.65em;margin-top:4px;font-weight:300}
    .pack-precio{font-size:1em;margin:10px 0 8px 0;font-weight:400}
    .pack-bonus{font-size:.8em;margin-top:5px;font-weight:700}
    .pack-total{font-size:.85em;margin-top:6px;font-weight:400}
    .pack-promocion{font-size:.8em;padding:4px 6px;margin-top:10px;font-weight:700;border-radius:4px;border-width:1px}
    .buy-btn{padding:8px 15px;font-size:0.9em;margin-top:15px;max-width:160px;font-weight:700;border-radius:6px;letter-spacing:.6px;align-self:center;width:auto}
}

        .payment-choice-container {
            display: flex;
            align-items: stretch; 
            margin-bottom: 15px;
            border: 1px solid #444;
            border-radius: 8px;
            overflow: hidden;
            background-color: #232e3f; 
        }
        .payment-option {
            flex-grow: 1;
            padding: 12px 15px;
            text-align: center;
            cursor: pointer;
            background-color: #2c3a52; 
            color: #ccc;
            transition: background-color 0.3s, color 0.3s;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: none; 
        }
        
        .payment-option[data-payment="moneda"]:hover {
            background-color: #28a745; /* Green for moneda hover */
            color: #fff;
        }

        .payment-option[data-payment="ogrinas"]:hover {
            background-color: #007bff; /* Blue for ogrinas hover */
            color: #fff;
        }

        .payment-option[data-payment="moneda"].active {
            background-color: #28a745; /* Green */
            color: #fff;
            font-weight: bold;
        }
        .payment-option[data-payment="ogrinas"].active {
            background-color: #007bff; /* Blue */
            color: #fff;
            font-weight: bold;
        }

        .payment-option .payment-amount {
            font-size: 1.2em; 
            display: block;
            line-height: 1.3;
        }
        .payment-option .payment-currency-label {
            font-size: 0.8em; 
            margin-top: 4px;
            display: block;
        }
        .payment-option-divider {
            padding: 12px 10px;
            color: #777;
            font-weight: bold;
            background-color: #232e3f; 
            display: flex;
            align-items: center;
            flex-shrink: 0; 
        }
        .detalle-precio { 
            margin-bottom: 10px; 
            font-size: 1.4em;   
            font-weight: bold;
            color: #fff;
        }