.elementor-kit-6{--e-global-color-primary:#002542;--e-global-color-secondary:#237BF7;--e-global-color-text:#7A7A7A;--e-global-color-accent:#18AA88;--e-global-color-6d0143c:#FDD516;--e-global-color-1a0ccd7:#E10735;--e-global-color-7ea7c28:#000000;--e-global-color-1a54c6f:#FFFFFF;--e-global-color-f6eb1b4:#FFFFFF00;--e-global-color-b3aab32:#EDEDED;--e-global-typography-primary-font-family:"Anybody";--e-global-typography-primary-font-size:2rem;--e-global-typography-primary-font-weight:900;--e-global-typography-primary-line-height:1.2em;--e-global-typography-secondary-font-family:"Anybody";--e-global-typography-secondary-font-size:1.5rem;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-text-font-family:"Open Sans";--e-global-typography-text-font-size:1rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"Open Sans";--e-global-typography-accent-font-size:1rem;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-line-height:1.5em;--e-global-typography-40ca9a7-font-family:"Pacifico";--e-global-typography-40ca9a7-font-size:1.5rem;--e-global-typography-40ca9a7-font-weight:300;--e-global-typography-40ca9a7-line-height:1.2em;--e-global-typography-a6fd871-font-family:"Pacifico";--e-global-typography-a6fd871-font-size:0.9rem;color:var( --e-global-color-text );}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --azul-marino:#002542; --azul-cielo:#237BF7; --texto:#7A7A7A; --verde:#18aa88; --amarillo:#FDD516; --rojo:#E10735; --negro:#000000; --blanco:#ffffff; --transparente:#FFFFFF00; --titulo:Anybody; --textos:Open Sans; --destacados:Pacifico; --Gris:#EDEDED; }
/* Start custom CSS */html, body {
	overflow-x:hidden;
}
header {
    position: absolute;
    width: 100%;
    z-index: 999;
    background: white;
}
/* SCROLL */
body::-webkit-scrollbar {
    width: 10px;
}
body::-webkit-scrollbar-thumb {
    background-color: var( --e-global-color-secondary );
}
body::-webkit-scrollbar-track {
    background: var( --e-global-color-primary );
}
/* Solo en pantallas a partir de 769px */
@media (max-width: 767px) {
  /* SCROLL */
  body::-webkit-scrollbar {
      width: 0px;
  }
}
/* Enlaces centrados */

@media (max-width: 767px) {
a, a span {
    text-align: center !important;
}
}

/* SELECCIÓN */
::selection {
  background-color: var( --e-global-color-primary ); 
  color: var( --e-global-color-secondary );
}
/* COOKIES */
div#cmplz-document {
    width: 100%;
    max-width: 100%;
}

/* TAMAÑOS DE LA TIPOGRAFIA */
html{
	font-size: clamp(14px, 1vw ,16px)
}

/* -----------------------------------------
   OCULTAR EN MÓVIL (hasta 767px)
----------------------------------------- */
@media (max-width: 767px) {
  .ocultar-movil {
    display: none !important;
  }
}

/* -----------------------------------------
   OCULTAR EN TABLET Y MÓVIL (hasta 1024px)
   Oculta en todo lo que sea más pequeño que un ordenador
----------------------------------------- */
@media (max-width: 1024px) {
  .ocultar-tablet {
    display: none !important;
  }
}

/* -----------------------------------------
   OCULTAR SOLO EN TABLET (entre 768px y 1024px)
   Opcional: Si quieres que algo se vea en móvil, pero NO en tablet
----------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .ocultar-solo-tablet {
    display: none !important;
  }
}

/* VIDEOS DE ANCHO COMPLETO */

.videos-alto-completo {
  width: 100% !important;
  height: 100% !important;
  
  /* Esta es la clave: llena el contenedor manteniendo la proporción. 
     Recortará un poco los bordes si la proporción del contenedor es distinta a la del vídeo */
  object-fit: cover !important; 
}

/* HEADER */
  
.logotipo-blanco {
    filter: brightness(0) invert(1);
}

/* HERO */

/* ==========================================================================
   EFECTO HOVER EN HERO - CAMBIO DE FONDO, TEXTOS E ICONOS (CON ANIMACIÓN)
   ========================================================================== */

/* 1. Contenedor padre principal */
#hero-certify-you {
    position: relative;
    overflow: hidden;
}

/* 2. Activar la "manita" en los botones */
#bt-hero-experiencias,
#bt-hero-clases-cursos {
    cursor: pointer;
}

/* 3. Transición inicial para los textos (H1, Ofrecemos y Puntos destacados) */
#h1-hero-certify-you,
#ofrecemos-hero-certify-you,
#puntos-destacados .elementor-icon-list-text {
    transition: color 0.3s ease; 
}

/* 4. Elevamos el contenido principal (textos y botones) */
#hero-certify-you > div:not(#opcion-hero-experiencias):not(#opcion-hero-cursos) {
    position: relative;
    z-index: 10; 
}

/* 5. Estilos base para los elementos de fondo absolutos (ocultos) */
#opcion-hero-experiencias,
#opcion-hero-cursos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
    
    /* Estado inicial: oculto */
    opacity: 0;
    visibility: hidden;
    
    /* Transición suave para el efecto "fade in" del fondo */
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

/* 6. Estilos base para el icono Lottie (ESTADO INICIAL ANIMADO) */
.icono-hero-opciones {
    /* Estado inicial: oculto y desplazado 30px hacia arriba */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-30px);
    
    /* Transición suave con ligero retraso para que aparezca tras el fondo */
    transition: 
        opacity 0.4s ease-out 0.15s, 
        visibility 0.4s ease-out 0.15s, 
        transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.15s;
}

/* ==========================================================================
   7. LÓGICA DE HOVER: FONDOS, TEXTOS E ICONOS
   ========================================================================== */

/* --- HOVER EN EXPERIENCIAS --- */
#hero-certify-you:has(#bt-hero-experiencias:hover) #opcion-hero-experiencias {
    opacity: 1;
    visibility: visible;
}

/* Cambiar textos a blanco (H1, Ofrecemos y Lista inferior) */
#hero-certify-you:has(#bt-hero-experiencias:hover) #h1-hero-certify-you,
#hero-certify-you:has(#bt-hero-experiencias:hover) #ofrecemos-hero-certify-you,
#hero-certify-you:has(#bt-hero-experiencias:hover) #puntos-destacados .elementor-icon-list-text {
    color: #ffffff;
}

/* Mostrar icono y deslizar a su posición original */
#bt-hero-experiencias:hover .icono-hero-opciones {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* --- HOVER EN CLASES Y CURSOS --- */
#hero-certify-you:has(#bt-hero-clases-cursos:hover) #opcion-hero-cursos {
    opacity: 1;
    visibility: visible;
}

/* Cambiar textos a blanco (H1, Ofrecemos y Lista inferior) */
#hero-certify-you:has(#bt-hero-clases-cursos:hover) #h1-hero-certify-you,
#hero-certify-you:has(#bt-hero-clases-cursos:hover) #ofrecemos-hero-certify-you,
#hero-certify-you:has(#bt-hero-clases-cursos:hover) #puntos-destacados .elementor-icon-list-text {
    color: #ffffff;
}

/* Mostrar icono y deslizar a su posición original */
#bt-hero-clases-cursos:hover .icono-hero-opciones {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* CARRUSEL */

/* Cambiar a blanco el texto al hacer hover en la ficha */
#hover-ficha-cursos:hover .elementor-post-info__terms-list-item,
#hover-ficha-cursos:hover .elementor-heading-title,
#hover-ficha-cursos:hover .elementor-widget-theme-post-excerpt {
    color: #ffffff !important;
}/* End custom CSS */