/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Contenedor principal */
.carrusel-gris-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    gap: 15px;
    font-family: inherit;
}

/* Área deslizable */
.carrusel-gris-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 5px;
    cursor: grab;
}
.carrusel-gris-container::-webkit-scrollbar {
    display: none;
}
.carrusel-gris-container.arrastrando {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

/* Tarjeta Gris (Basada en tu diseño anterior) */
.tarjeta-gris {
    flex: 0 0 320px; /* Ancho fijo para que parezca una tarjeta de carrusel */
    scroll-snap-align: start;
    background-color: #f7f7f7;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Sombra sutil para despegarla del fondo */
}

/* Información interna */
.info-gris {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.linea-gris {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #222;
    font-size: 15px;
}

.linea-gris svg {
    width: 18px;
    height: 18px;
    fill: #111;
    flex-shrink: 0;
}

/* Botón Inscribirme Rojo (Tu código original + ancho completo) */
.btn-inscribirme-rojo {
    background-color: #cc0000 !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius:15px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border: none !important;
    transition: background 0.3s ease !important;
    display: block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.btn-inscribirme-rojo:hover {
    background-color: #cc0000 !important;
}

/* Flechas laterales */
.carrusel-btn-gris {
    background: transparent !important; 
    border: none;
    font-size: 24px;
    font-weight: regular;
    color: #333 !important;
    cursor: pointer;
    padding: 10px;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.carrusel-btn-gris:hover {
    transform: scale(1.2);
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .tarjeta-gris {
        flex: 0 0 85%; /* En móvil ocupa el 85% para ver que sigue deslizando */
    }
    .carrusel-btn-gris {
        display: none; /* Oculta flechas, se usa arrastrando */
    }
}
.elementor-icon-box-title {
	display: inline;
}

.elementor-icon-box-description {
	display: inline;
}

/* Contenedor principal del carrusel */
.carrusel-cursos-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    gap: 15px;
    font-family: inherit;
}

/* Área deslizable */
.carrusel-cursos-container {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Oculta scrollbar en Firefox */
    -ms-overflow-style: none; /* Oculta scrollbar en IE/Edge */
    padding: 10px 5px; /* Da espacio para que no se corte la sombra */
}

.carrusel-cursos-container::-webkit-scrollbar {
    display: none; /* Oculta scrollbar en Chrome/Safari */
}

/* Botones de flechas */
.carrusel-btn {
    background: transparent !important;
    border: none;
    font-size: 24px;
    font-weight: regular;
    color: #333 !important;
    cursor: pointer;
    padding: 10px;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.carrusel-btn:hover {
    transform: scale(1.2);
}

/* Tarjeta individual (Estado Normal - Fondo Rojo) */
.tarjeta-curso {
    flex: 0 0 275px; /* Ancho fijo de cada tarjeta */
    scroll-snap-align: start;
    background-color: #f4f4f4;
    color: #333333;
    border: 2px solid #cc0000;
    border-radius: 10px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    min-height: 220px;
    text-decoration: none;
}

.tarjeta-titulo {
    font-size: 20px;
    font-weight: 700 !important;
    margin: 0 0 20px 0;
    color: #333;
    line-height: 1.2;
    transition: color 0.3s ease;
}

.tarjeta-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
    flex-grow: 1;
}

.tarjeta-linea {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.tarjeta-linea svg {
    width: 18px;
    height: 18px;
    fill: currentColor; /* El SVG hereda el color del texto automáticamente */
}

.tarjeta-enlace {
    color: #cc0000;
    font-weight: 700;
    text-decoration: underline;
    font-size: 16px;
    margin-top: auto;
    transition: color 0.3s ease;
}

/* --- Estado Hover (Fondo Blanco) --- */
.tarjeta-curso:hover {
    background-color: #cc0000;
    color: #fff; /* Color oscuro para el texto y los iconos */
}

.tarjeta-curso:hover .tarjeta-titulo {
    color: #fff;
}

.tarjeta-curso:hover .tarjeta-enlace {
    color: #fff; /* El enlace se vuelve rojo */
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
    .tarjeta-curso {
        flex: 0 0 85%; /* En móviles ocupa el 85% de la pantalla para ver el borde del siguiente */
    }
    .carrusel-btn {
        display: none; /* Ocultar las flechas en móvil, se navega arrastrando */
    }
}
/* --- CURSORES PARA DRAG & DROP --- */
.carrusel-cursos-container {
    cursor: grab;
    scroll-snap-type: x mandatory; /* Mantenemos el chasquido magnético */
}

.carrusel-cursos-container.arrastrando {
    cursor: grabbing;
    scroll-snap-type: none; /* Se desactiva solo al arrastrar para que sea fluido */
    user-select: none; /* Evita que el texto se pinte de azul al arrastrar */
}
.added_to_cart{
    border:1px solid #000 !important;
    line-height:24px !important;
    text-align:center;
    border-radius:10px;
	color:#000;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__image, .wc-block-cart-item__image{
	display:none !important;
}
@media only screen and (min-width: 768px){
	.acciones-curso-libre{
		flex-direction:row !important;
		max-width:80% !important;
	}
}