/*
Theme Name: ConclaveBDSM
Template: kadence
*/
@media (max-width: 767px) {
    /* 1. Fija la barra en el fondo absoluto de la pantalla móvil */
    .mobile-app-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important; /* Asegura que flote por encima de cualquier otro elemento */
        margin: 0 !important;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.6); /* Sombra sutil para dar profundidad */
    }

    /* 2. Fuerza a las 4 columnas a quedarse siempre en una sola línea horizontal */
    .mobile-app-bar .kb-row-column-wrap,
    .mobile-app-bar .kt-row-column-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-around !important;
        align-items: center !important;
    }

    /* 3. Ajusta el tamaño de cada botón para que se distribuya equitativamente */
    .mobile-app-bar .wp-block-kadence-column {
        width: 25% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. TRUCO VITAL: Añade un colchón al fondo de la web para que la barra fija 
          no tape el texto del footer o los botones de compra al final de la página */
    body {
        padding-bottom: 70px !important;
    }
}
/* 1. Preparamos el contenedor para que cuente los artículos solos */
.lista-editorial-dinamica {
    counter-reset: agenda-cultural;
}

/* 2. Diseñamos el espacio para cada artículo de la lista */
.lista-editorial-dinamica article {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding: 20px 0 20px 70px !important; /* Deja espacio a la izquierda para el número */
    margin: 0 !important;
    border-bottom: 1px solid #5c1314 !important; /* La línea elegante Rojo Carmesí */
}

/* 3. Estilizamos el título dinámico para que se vea premium */
.lista-editorial-dinamica article .entry-title,
.lista-editorial-dinamica article h2 {
    font-family: "Montserrat", sans-serif !important;
    font-size: 1.1rem !important;
    color: #ffffff !important;
    margin: 0 !important;
}

/* 4. Creamos e inyectamos los números gigantes automáticos (01, 02, 03...) */
.lista-editorial-dinamica article::before {
    counter-increment: agenda-cultural;
    content: counter(agenda-cultural, decimal-leading-zero);
    position: absolute !important;
    left: 0 !important;
    font-family: "Calisto MT", serif !important;
    font-size: 2.3rem !important;
    color: rgba(168, 125, 18, 0.4) !important; /* Oro viejo sutil con transparencia */
    line-height: 1 !important;
}
/* ==========================================
   TARJETAS DE EVENTOS PREMIUM (DESKTOP)
   ========================================== */
/* Fondo de la tarjeta y bordes estilo Oro Viejo */
.rejilla-eventos-premium article, 
.rejilla-eventos-premium .loop-entry {
    background: #090e14 !important; /* Azul noche ultra oscuro */
    border: 1px solid #A87D12 !important; /* Borde de Oro Viejo */
    border-radius: 4px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Efecto Hover Premium */
.rejilla-eventos-premium article:hover, 
.rejilla-eventos-premium .loop-entry:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(168, 125, 18, 0.2) !important;
}

/* Tipografía del título del evento */
.rejilla-eventos-premium .entry-title a, 
.rejilla-eventos-premium h2 a {
    font-family: 'Montserrat', sans-serif !important;
    color: #ffffff !important;
    font-size: 1.2rem !important;
    text-decoration: none !important;
}

/* Botón "RESERVAR CUPO" estilo Carmesí de ancho completo */
.rejilla-eventos-premium .kb-post-button-wrap a {
    background-color: #5c1314 !important; /* Rojo Carmesí */
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    padding: 12px 0 !important;
    margin-top: 15px !important;
    border-radius: 0px !important; /* Botón recto minimalista */
    transition: background 0.3s ease !important;
}

.rejilla-eventos-premium .kb-post-button-wrap a:hover {
    background-color: #A87D12 !important; /* Cambia a Oro Viejo al pasar el cursor */
}

/* ==========================================
   EL HACK: CARRUSEL MÓVIL SIPEABLE EN VERSIÓN GRATIS
   ========================================== */
@media (max-width: 767px) {
    /* Rompemos la rejilla rígida y la volvemos una fila horizontal */
    .rejilla-eventos-premium .kt-blocks-post-grid-wrap,
    .rejilla-eventos-premium ul {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important; /* Permite scroll horizontal */
        scroll-snap-type: x mandatory !important; /* Hace el efecto imán de carrusel */
        gap: 15px !important;
        padding: 10px 5px 20px 5px !important;
        scrollbar-width: none !important; /* Esconde la barra fea en Firefox */
    }

    /* Esconde la barra de scroll en Chrome/Safari para un look limpio */
    .rejilla-eventos-premium .kt-blocks-post-grid-wrap::-webkit-scrollbar {
        display: none !important;
    }

    /* Ajustamos el tamaño de las tarjetas para que se asome la siguiente */
    .rejilla-eventos-premium article, 
    .rejilla-eventos-premium .loop-entry {
        flex: 0 0 82% !important; /* Muestra el 82% de la tarjeta actual */
        scroll-snap-align: center !important;
    }
}
/* ==========================================
   DISEÑO DE LA VITRINA "AGENDA" 
   ========================================== */
.agenda-completa-premium article, 
.agenda-completa-premium .loop-entry {
    background: #090e14 !important; /* Azul noche */
    border: 1px solid #A87D12 !important; /* Borde Oro Viejo */
    border-radius: 4px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.agenda-completa-premium article:hover, 
.agenda-completa-premium .loop-entry:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(168, 125, 18, 0.2) !important;
}

.agenda-completa-premium .entry-title a, 
.agenda-completa-premium h2 a {
    font-family: 'Montserrat', sans-serif !important;
    color: #ffffff !important;
    font-size: 1.2rem !important;
    text-decoration: none !important;
}

/* Botón Carmesí de ancho completo */
.agenda-completa-premium .kb-post-button-wrap a {
    background-color: #5c1314 !important; /* Carmesí */
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    padding: 12px 0 !important;
    margin-top: 15px !important;
    border-radius: 0px !important;
    transition: background 0.3s ease !important;
}

.agenda-completa-premium .kb-post-button-wrap a:hover {
    background-color: #A87D12 !important; /* Cambia a Oro Viejo */
}
/* ==========================================
   DISEÑO PREMIUM PÁGINA DE PRODUCTO (EVENTOS)
   ========================================== */

/* 1. Fondo oscuro y textos claros para el lienzo del producto */
.single-product .site-main {
    background-color: #090e14 !important;
    color: #ffffff !important;
}

/* 2. Título del evento elegante */
.single-product .product_title {
    font-family: "Calisto MT", serif !important;
    color: #ffffff !important;
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
}

/* 3. Precio destacado en Oro Viejo */
.single-product .woocommerce-Price-amount {
    color: #A87D12 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
}

/* ==========================================
   CORRECCIÓN: ZONA DE COMPRA Y CANTIDAD
   ========================================== */

/* 1. Ordenamos el contenedor para que la cantidad y el botón convivan bien */
.single-product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important; /* Espacio entre la cantidad y el botón */
    align-items: stretch !important;
}

/* 2. Hacemos visibles los botones de + y - de Kadence/WooCommerce */
.single-product form.cart .quantity .plus,
.single-product form.cart .quantity .minus {
    background-color: transparent !important;
    color: #ffffff !important; /* Color blanco para que se vean claramente */
    border: 1px solid #A87D12 !important; /* Borde Oro Viejo */
    border-radius: 0 !important;
    width: 35px !important;
    transition: all 0.3s ease !important;
}

/* Efecto al pasar el cursor sobre los botones de cantidad */
.single-product form.cart .quantity .plus:hover,
.single-product form.cart .quantity .minus:hover {
    background-color: #A87D12 !important;
    color: #090e14 !important;
}

/* 3. Ajuste de la caja de texto del número para que coincida */
.single-product form.cart .quantity input.qty {
    background-color: transparent !important;
    color: #ffffff !important;
    border-top: 1px solid #A87D12 !important;
    border-bottom: 1px solid #A87D12 !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    font-family: "Montserrat", sans-serif !important;
    width: 50px !important;
}

/* 4. Corrección del Botón de Compra para que no se desborde */
.single-product form.cart .single_add_to_cart_button {
    background-color: #5c1314 !important; /* Rojo Carmesí */
    color: #ffffff !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    padding: 15px 20px !important;
    margin-top: 0 !important;
    width: auto !important;
    flex: 1 !important; /* Le dice al botón: "Ocupa todo el espacio que sobra" */
    white-space: normal !important; /* Obliga al texto a acomodarse en lugar de salirse */
    line-height: 1.3 !important;
    transition: background-color 0.3s ease !important;
}

.single-product form.cart .single_add_to_cart_button:hover {
    background-color: #A87D12 !important; /* Cambia a Oro Viejo */
}

/* 6. Pestañas de descripción inferiores */
.woocommerce-tabs ul.tabs li a {
    color: #cccccc !important;
    font-family: "Montserrat", sans-serif !important;
}

.woocommerce-tabs ul.tabs li.active a {
    color: #A87D12 !important; /* Pestaña activa en Oro Viejo */
    border-bottom: 2px solid #5c1314 !important; /* Línea inferior Carmesí */
}
/* ==========================================
   CORRECCIÓN COMPLETA: CUADRO INTERNO WHATSAPP
   ========================================== */

/* 1. Obligar a TODOS los cuadros internos rebeldes a volverse Azul Noche */
.woocommerce-order-received div,
.woocommerce-order-received section,
.woocommerce-order-received article {
    background-color: #090e14 !important;
    background: #090e14 !important;
}

/* 2. Asegurar que todo el texto se mantenga en Blanco Puro */
.woocommerce-order-received p, 
.woocommerce-order-received span, 
.woocommerce-order-received div,
.woocommerce-order-received h1,
.woocommerce-order-received h2 {
    color: #ffffff !important;
}

/* 3. SALVAGUARDA: Devolver el color VERDE brillante exclusivamente al botón de WhatsApp */
.woocommerce-order-received button,
.woocommerce-order-received .button,
.woocommerce-order-received [class*="btn"],
.woocommerce-order-received [class*="button"],
.woocommerce-order-received [class*="whatsapp"],
.woocommerce-order-received a[href*="whatsapp"],
.woocommerce-order-received a[href*="wa.me"] {
    background-color: #25d366 !important; /* Verde oficial de WhatsApp */
    background: #25d366 !important;
    color: #ffffff !important;
    border: none !important;
}

/* 4. Mantener las etiquetas de los detalles del pedido con su diseño limpio */
.woocommerce-order-received .woocommerce-order-overview {
    background: none !important;
    background-color: transparent !important;
}
/* ==========================================
   SECCIÓN DE BLOG Y PUBLICACIONES PREMIUM
   ========================================== */

/* 1. Fondo base para la página de blog y posts individuales */
body.blog, body.archive, body.single-post, 
.blog #main, .archive #main, .single-post #main {
    background-color: #090e14 !important;
    color: #ffffff !important;
}

/* 2. Tarjetas de los artículos en el listado general */
.blog article.post, .archive article.post {
    background-color: #0d151f !important; /* Un azul ligeramente más claro para separar del fondo */
    border: 1px solid #A87D12 !important; /* Borde sutil Oro Viejo */
    padding: 30px !important;
    margin-bottom: 40px !important;
    border-radius: 0px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.blog article.post:hover, .archive article.post:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px rgba(168, 125, 18, 0.1) !important; /* Destello Oro Viejo al pasar el mouse */
}

/* 3. Títulos de los artículos (Estilo Editorial) */
.blog .entry-title a, .archive .entry-title a, .single-post .entry-title {
    font-family: "Calisto MT", serif !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.blog .entry-title a:hover {
    color: #A87D12 !important; /* Resalta en Oro Viejo */
}

/* 4. Tipografía interna del Post (Lectura Fluida y Descansada) */
.single-post .entry-content p, .single-post .entry-content li {
    font-family: "Georgia", serif !important;
    color: #e0e6ed !important; /* Blanco marfil para evitar la fatiga visual */
    font-size: 18px !important;
    line-height: 1.8 !important; /* Espaciado generoso entre líneas */
    letter-spacing: 0.3px !important;
}

/* 5. Enlaces dentro de los artículos */
.single-post .entry-content a {
    color: #A87D12 !important; /* Oro Viejo */
    text-decoration: underline !important;
    font-weight: 600 !important;
}

.single-post .entry-content a:hover {
    color: #5c1314 !important; /* Cambia a Carmesí */
}

/* 6. Detalles del post (Fecha, autor, categorías) */
.entry-meta, .post-meta, .entry-meta span, .entry-meta a {
    color: #8a9ba8 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}
/* ==========================================================
   FORZAR MODO OSCURO EN EVENTIN (CÓNCLAVE BDSM DOMINICANO)
   ========================================================== */

/* 1. CORREGIR TÍTULOS INVISIBLES (Página de Formación y Relacionados) */
.etn-event-title, 
.etn-event-title a,
.etn-event-grid-title,
.etn-event-grid-title a,
.etn-event-item h3,
.etn-event-item h3 a,
.etn-related-events h3,
.etn-related-events h3 a {
    color: #ffffff !important; /* Hace que todos los títulos sean blancos */
}

/* 2. ELIMINAR EL CUADRO BLANCO JARREANTE AL PASAR EL CURSOR (HOVER) */
/* En lugar de volverse blanco, la tarjeta se iluminará sutilmente en azul oscuro */
.etn-event-grid-item:hover,
.etn-event-single-wrapper:hover,
.etn-event-item:hover,
.single-etn_events .etn-event-grid-item:hover {
    background-color: #1e294b !important; /* Un azul un poco más claro que tu fondo oscuro */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3) !important;
}

/* 3. ASEGURAR QUE LOS TÍTULOS Y DESCRIPCIONES SIGAN SIENDO VISIBLES EN HOVER */
.etn-event-grid-item:hover .etn-event-title a,
.etn-event-grid-item:hover .etn-event-grid-title a,
.etn-event-grid-item:hover h3 a,
.etn-event-grid-item:hover .etn-event-short-description,
.etn-event-grid-item:hover p {
    color: #ffffff !important; /* Mantiene todo el texto en blanco al pasar el mouse */
}

/* 4. AJUSTE EXTRA: COLOR DE TEXTO DE LAS DESCRIPCIONES */
.etn-event-short-description, 
.etn-event-grid-item p {
    color: #b3c2e6 !important; /* Un gris claro/azulado muy legible para la descripción */
}