/* === VARIABLES & RESET === */
:root {
    --color-fondo: #ffffff;
    --color-texto: #2c2c2c;
    --color-rojo-casino: #e6005c; /* Rosa intenso / Frambuesa */
    --color-negro-casino: #1a1a1a;
    --color-dorado: #c5a059;
    --borde-suave: #e0e0e0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* REEMPLAZA TODO TU BLOQUE 'body' ACTUAL POR ESTE */
body {
    background-color: var(--color-fondo); /* Color base por si falla la imagen */
    color: var(--color-texto);
    font-family: 'Josefin Sans', sans-serif;
    
    /* === TU NUEVA IMAGEN === */
    /* Ruta a tu imagen */
    background-image: url('static/chips.png');
    
    /* Deja que el navegador la repita (es el comportamiento por defecto) */
    background-repeat: repeat;
    
    /* Opcional: Si tu imagen es de 500px pero la quieres ver más chica, ajusta aquí */
    /*background-size: 300px auto;*/
    /* ======================= */

    padding-bottom: 50px;
}

a { text-decoration: none; color: inherit; }

/* === HEADER JUGUETÓN === */
.header-casino {
    text-align: center;
    padding: 20px 20px 30px 20px; /* Un poco más de espacio abajo */
	background: #f2f2f2;
	background: linear-gradient(180deg,rgba(242, 242, 242, 1) 58%, rgba(250, 250, 250, 0) 100%);
    /*border-bottom: 5px solid var(--color-negro-casino);*/
    /*box-shadow: 0 4px 15px rgba(0,0,0,0.05);*/
}

.titulo-principal {
    font-size: 3rem;
    text-transform: uppercase;
    color: var(--color-negro-casino);
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
}

.titulo-principal span {
    color: var(--color-rojo-casino);
}

.subtitulo {
    font-size: 1.1rem;
    color: #666;
    letter-spacing: 2px;
    background: #f4f4f4;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    margin-top: 10px;
    margin-bottom: 15px;
}

/* Estilos para los iconos del header (donde estaban los ?) */
.header-icons {
    margin-top: 15px;
    font-size: 1.2rem;
    color: var(--color-rojo-casino);
    display: flex;
    justify-content: center;
    gap: 20px; /* Espacio entre los iconos */
    opacity: 0.8;
}


/* === CONTENEDOR === */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 10px;
}

/* === SECCIÓN PRINCIPAL === */
.seccion-principal {
    margin-top: 40px;
    margin-bottom: 40px;
}

.titulo-seccion {
    text-align: center;
    font-size: 1.8rem;
	-webkit-text-stroke: 1px #0a0a0aaa;
    color: #fafafa;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
	padding-inline: 5px;
}

/* Decoración dorada al lado del título principal */
.titulo-seccion i {
    color: var(--color-dorado);
    font-size: 1.2rem;
}

/* === ACORDEÓN (ESTILO CARTA BLANCA) === */
.categoria-wrapper {
    background: #fff;
    border: 1px solid var(--borde-suave);
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.03); /* Sombra 3D muy suave */
    transition: all 0.2s ease;
    overflow: hidden;
}

.categoria-header {
    padding: 18px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

/* Efecto hover */
.categoria-header:hover {
    background-color: #f9f9f9;
}

.categoria-titulo {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    color: var(--color-negro-casino);
    display: flex;
    align-items: center;
    gap: 12px;
}

/* El icono rosa al lado de la categoría (donde salía el cubo) */
.categoria-titulo i {
    color: var(--color-rojo-casino);
    font-size: 1.1rem;
}

.icon-toggle {
    font-size: 1rem;
    color: #ccc;
    transition: transform 0.3s;
}

/* ESTADOS "ACTIVO" (Cuando se abre) */
.categoria-header.activo .icon-toggle {
    transform: rotate(180deg);
    color: var(--color-negro-casino);
}

.categoria-header.activo {
    border-bottom: 2px dashed var(--borde-suave);
    background-color: #fff; 
}

.categoria-wrapper.activo-wrapper {
     box-shadow: 0 8px 15px rgba(230, 0, 92, 0.1); /* Resplandor rosa al abrir */
     border-color: rgba(230, 0, 92, 0.3);
}


/* === CONTENIDO === */
.categoria-contenido {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: #ffffff;
}

.sub-descripcion-texto {
    padding: 15px 20px;
    font-size: 0.9rem;
    color: #666;
    background-color: #fff8fb;
    border-bottom: 1px solid #eee;
    font-style: italic;
}

/* === ITEM LISTA === */
.item-lista {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0; /* Separador muy sutil */
}
.item-lista:last-child { border-bottom: none; }

.info-producto {
    flex: 1;
    padding-right: 15px;
}

.nombre-producto {
    font-size: 1.05rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.desc-producto {
    font-size: 0.85rem;
    color: #777;
    line-height: 1.3;
}

.desc-opcion {
    font-size: 0.75rem;
    color: #555;
    background: #f0f0f0;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    margin-top: 5px;
    margin-right: 5px;
    font-weight: 600;
}

/* === PRECIO TIPO "FICHA DE CASINO" === */
.precio-badge {
    background-color: #fff;
    color: var(--color-rojo-casino);
    border: 2px dashed var(--color-rojo-casino); /* Borde punteado de ficha */
    border-radius: 50px;
    padding: 8px 12px;
    font-weight: 800;
    font-size: 1rem;
    min-width: 90px; /* Asegura que entren 6 cifras */
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(230, 0, 92, 0.15);
}

/* === FOOTER === */
.footer {
    text-align: center;
    padding: 40px 20px;
    background: #fff;
    border-top: 5px solid var(--color-negro-casino);
    margin-top: 50px;
}