/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.1.1.1726679886
Updated: 2024-09-18 17:18:06

*/

/* Oculta todos los submenús por defecto */
.elementor-nav-menu--main .sub-menu {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
}

/* Muestra el submenú al hacer hover sobre el padre */
.elementor-nav-menu--main .menu-item:hover > .sub-menu {
  display: grid !important;
  opacity: 1;
  visibility: visible;
}
.elementor-nav-menu--main .elementor-nav-menu ul {width: initial !important;}

.tarjeta-servicio-inicio p:nth-of-type(1){border-radius: 5px 5px 0px 0px;}
.tarjeta-servicio-inicio p img:nth-of-type(2) {background:#fff; padding:5px; border-radius:60px; display:inline-block; width:auto; margin:auto; margin-top:-30px;}
.tarjeta-servicio-inicio h2 {padding:0px 20px; font-size:30px;}
.tarjeta-servicio-inicio p:nth-of-type(2) {padding:20px;}
.tarjeta-servicio-inicio a,.tarjeta-servicio-inicio a::hover {color:#21688D !important;}






.categorias-botones a:hover,a.boton-mas-info:hover{color:#fff; background:#e25f27;}
strong {font-weight:700;}
.tarjeta-servicio {
    position: relative;
    overflow: hidden;
    text-align: center;
}

.tarjeta-servicio .elementor-image-box-img {
    position: relative;
}

.tarjeta-servicio .elementor-image-box-img::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff;
    border-radius: 50%;
    border: 5px solid #fff;
    z-index: 10;
}

#ico-1 .elementor-image-box-img::after {
    background-image: url('https://icsam.net/wp-content/uploads/2025/02/ICSAM-Sanidad-Ambiental.png');
}

#ico-2 .elementor-image-box-img::after {
    background-image: url('https://icsam.net/wp-content/uploads/2025/02/ICSAM-Seguridad-Alimentaria.png');
}

#ico-3 .elementor-image-box-img::after {
    background-image: url('https://icsam.net/wp-content/uploads/2025/02/ICSAM-Formacion-para-profesionales.png');
}



#info_superior{color:#fff; background: #2f3d4b; border-top:3px solid #E26028; border-bottom:3px solid #E26028;}
.css-informacion_destacada_superior {padding-top:50px; padding-bottom:40px;}

.css-informacion_destacada_inferior {margin:25px 0;}
.css-informacion_destacada_inferior h2 {color:#E26028;}


.presupuesto a {background: #f5945c;
    padding: 10px 15px;
    color: #000;
    border: 3px solid #f5945c;
    border-radius: 5px;
    font-size: 110%;}

.presupuesto a:hover {background: #fff; color:#000;}
.cursos-grid {margin-bottom:60px;}
.categoria-curso {color:#fff; background: #2f6684; padding:10px 20px;margin-bottom:20px;}

.categoria-curso h2{margin-bottom:10px;}
.css-sobre_curso,.css-precio {color:#000;}
.css-sobre_curso a {color: #f5945c;}
.css-sobre_curso a:hover {color: #ff7f50;}
.faq-question {
    cursor: pointer;
    padding: 15px;
    padding-left: 40px;
    position: relative;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
	font-size:18px !important;
}

.faq-question:before {
    content: '+';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: bold;
}

.faq-question.active:before {
    content: '-';
}

.faq-answer {
    display: none;
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
}

#contenido-producto h2 {padding-top:20px;}



.course-program .program-accordion{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.program-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;
}

.toggle-all-sections {
    background: none;
    border: none;
    color: #6366f1;
    cursor: pointer;
    text-decoration: underline;
    font-size: 14px;
    padding: 0;
}

.program-intro {
    margin-bottom: 24px;
    line-height: 1.5;
}

.program-section {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    margin-bottom: 8px;
}

.program-title {
    position: relative;
    padding: 16px;
    margin: 0;
    cursor: pointer;
    background-color: #f9fafb;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.program-title::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    transition: transform 0.2s;
}

.program-title.active::after {
    transform: translateY(-50%) rotate(-135deg);
}

.program-title:hover {
    background-color: #f3f4f6;
}

.program-title.active {
    background-color: #fff;
    border-bottom: 1px solid #e5e7eb;
}

.section-content {
    padding: 16px;
    background: #fff;
}

.section-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.section-content li {
    position: relative;
    padding: 8px 0 8px 20px;
    line-height: 1.5;
}

.section-content li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #6366f1;
}

.section-content strong {
    font-weight: 600;
}

.check-icon {
    color: green; /* Cambia el color del check según prefieras */
    margin-right: 5px;
    font-weight: bold;
}

/* Quitar el punto de la lista y ajustar el estilo */
.course-benefits ul {
    list-style-type: none; /* Eliminar el punto de la lista */
    padding-left: 0; /* Eliminar el margen izquierdo */
}

.course-benefits ul li {margin-bottom:15px;}

/*** Página de Cursos (archive) **/
/* Estilos para los botones de categoría */
.categorias-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.categoria-boton {
    padding: 10px 20px;
    background-color: #0073aa;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.categoria-boton:hover {
    background-color: #005f7f;
}

/* Estilos para cada curso */
.curso-item {
    position: relative;
}

.curso-imagen {
    position: relative;
}

.curso-etiqueta {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #569a76;
    color: #fff;
    padding: 5px 10px;
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 15px;
}

.curso-item.estilo-imagen {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

.curso-imagen {
    width: 30%; /* 30% en pantallas grandes */
    flex-shrink: 0;
}

.curso-contenido {
    width: 70%; /* 70% en pantallas grandes */
    padding: 20px;
    box-sizing: border-box; /* Asegura que el padding se mantenga dentro del ancho */
}

.curso-contenido h3 {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px; /* Espacio inferior para separar el título del precio */
}
.curso-contenido h3 a {color:#236992;}
.curso-contenido h3 a:hover {color:#e55f22;}

.curso-precio {
    font-size: 1.2em;
    color: #b31d1d;
    font-weight: bold;
    margin-bottom: 10px; /* Espacio inferior para separar el precio de la descripción */
}

.curso-contenido p {
    margin-bottom: 15px; /* Espacio entre la descripción y el botón */
}

.boton-mas-info {
    padding: 10px 20px;
    background-color: #236992;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    margin-top: auto; /* Empuja el botón hacia abajo si hay más contenido */
}

.boton-mas-info:hover {
    background-color: #003366;
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .curso-item.estilo-imagen {
        flex-direction: column; /* Cambia a columna en móviles */
    }

    .curso-imagen, .curso-contenido {
        width: 100%; /* Imagen y contenido ocupan el 100% en móviles */
    }

    .curso-imagen img {
        width: 100%; /* Asegura que la imagen ocupe todo el ancho */
        height: auto; /* Mantiene la proporción de la imagen */
    }
}

.video_lightbox_anchor_image:after {
    content: "▶"; /* Símbolo de play */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px; /* Ajusta el tamaño del símbolo */
    color: white; /* Cambia el color según necesites */
    z-index: 2;
    pointer-events: none;
}

/* .variaciones-curso .variations {width: 100% !important;} */
.variaciones-curso .variations tbody{
   display: grid !important;
   grid-template-columns: repeat(4, 1fr) !important;
   gap: 20px !important;
/*    width: 100% !important; */
   border: none !important;
}

.variaciones-curso .variations tr {
   display: block !important;
   border: none !important;
	background: #FAFAFA !important;
}

.variaciones-curso .variations th,
.variaciones-curso .variations td {
   display: block !important;
   width: 100% !important;
   text-align: left !important;
   padding: 5px 0 !important;
	background: #FAFAFA !important;
}
.woocommerce div.product form.cart .variations select, .variaciones-curso .variations td>select, .variaciones-curso .variations td>input {background-color: #ffffff !important;}
.variaciones-curso .variations td select option {width:100%;}
