.elementor-82 .elementor-element.elementor-element-117f8ce{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--overlay-opacity:1;--z-index:999;}.elementor-82 .elementor-element.elementor-element-117f8ce::before, .elementor-82 .elementor-element.elementor-element-117f8ce > .elementor-background-video-container::before, .elementor-82 .elementor-element.elementor-element-117f8ce > .e-con-inner > .elementor-background-video-container::before, .elementor-82 .elementor-element.elementor-element-117f8ce > .elementor-background-slideshow::before, .elementor-82 .elementor-element.elementor-element-117f8ce > .e-con-inner > .elementor-background-slideshow::before, .elementor-82 .elementor-element.elementor-element-117f8ce > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#FFFFFF;--background-overlay:'';}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-menu-toggle{margin:0 auto;}.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu .elementor-item{font-family:"Montserrat", Sans-serif;font-size:20px;font-weight:600;}.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown a, .elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-menu-toggle{color:#FFFFFF;fill:#FFFFFF;}.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown{background-color:#000000;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;}.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown a:hover,
					.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown a:focus,
					.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown a.highlighted,
					.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-menu-toggle:hover,
					.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-menu-toggle:focus{color:#FFFFFF;}.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown a:hover,
					.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown a:focus,
					.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown a.highlighted{background-color:#000000;}.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown .elementor-item, .elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:"Montserrat", Sans-serif;font-size:18px;font-weight:600;}.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown li:first-child a{border-top-left-radius:1px;border-top-right-radius:1px;}.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown li:last-child a{border-bottom-right-radius:1px;border-bottom-left-radius:1px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-82 .elementor-element.elementor-element-117f8ce{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 18px;--row-gap:0px;--column-gap:18px;--flex-wrap:nowrap;}.elementor-82 .elementor-element.elementor-element-b235ce3 img{width:300px;max-width:100%;}.elementor-82 .elementor-element.elementor-element-2f6a791{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:5px 5px 5px 5px;--nav-menu-icon-size:21px;}.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown{border-width:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown li:first-child a{border-top-left-radius:0px;border-top-right-radius:0px;}.elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown li:last-child a{border-bottom-right-radius:0px;border-bottom-left-radius:0px;}}@media(min-width:768px){.elementor-82 .elementor-element.elementor-element-117f8ce{--content-width:1400px;}}/* Start custom CSS for nav-menu, class: .elementor-element-2f6a791 */@media (max-width: 1024px){

  /* =========================
     AJUSTES RÁPIDOS
     ========================= */
  .elementor-82 .elementor-element.elementor-element-2f6a791{
    --vlf-safe: env(safe-area-inset-top);
    --vlf-header: 90px;                 /* altura header negro */
    --vlf-logo-w: 280px;                /* tamaño del logo */
    --vlf-line: #fff;  /* color líneas */
  }

  /* =========================
     OVERLAY FULLSCREEN NEGRO
     ========================= */
  .elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-menu-toggle[aria-expanded="true"]
  + nav.elementor-nav-menu--dropdown{
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;
    min-height: -webkit-fill-available !important;

    margin: 0 !important;
    background: #000 !important;

    z-index: 999999 !important;

    /* El contenido empieza debajo del header fijo */
    padding: calc(var(--vlf-header) + var(--vlf-safe)) 0 24px !important;

    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Quita cualquier “blanco” por hover/focus */
  .elementor-82 .elementor-element.elementor-element-2f6a791 nav.elementor-nav-menu--dropdown a:hover,
  .elementor-82 .elementor-element.elementor-element-2f6a791 nav.elementor-nav-menu--dropdown a:focus,
  .elementor-82 .elementor-element.elementor-element-2f6a791 nav.elementor-nav-menu--dropdown a:active{
    background: transparent !important;
    color: #fff !important;
  }

  /* =========================
     HEADER FIJO CON LOGO (NEGRO)
     ========================= */
  .elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-menu-toggle[aria-expanded="true"]
  + nav.elementor-nav-menu--dropdown::before{
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    height: calc(var(--vlf-header) + var(--vlf-safe)) !important;

    background-color: #000 !important;
    background-image: url("https://vivalafotografia.com/wp-content/uploads/2026/01/logovflnegro.jpg") !important;
    background-repeat: no-repeat !important;

    /* Ajuste para que el logo NO pise la línea */
    background-position: 16px calc(var(--vlf-safe) + 16px) !important;
    background-size: var(--vlf-logo-w) auto !important;

    z-index: 1000001 !important;
    pointer-events: none !important;
  }

  /* LÍNEA BLANCA debajo del header (fija y visible) */
  .elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-menu-toggle[aria-expanded="true"]
  + nav.elementor-nav-menu--dropdown::after{
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;

    top: calc(var(--vlf-header) + var(--vlf-safe)) !important;

    height: 1px !important;
    background: var(--vlf-line) !important;

    z-index: 1000002 !important;
    pointer-events: none !important;
  }

  /* =========================
     BOTÓN CERRAR (X) alineado con logo
     ========================= */
  .elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-menu-toggle.elementor-active{
    position: fixed !important;
    right: 16px !important;

    /* centrado dentro del header */
    top: calc(var(--vlf-safe) + (var(--vlf-header) - 44px)/2) !important;

    width: 44px !important;
    height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    z-index: 1000003 !important;
  }

  .elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-menu-toggle.elementor-active i,
  .elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-menu-toggle.elementor-active svg{
    color: #fff !important;
    fill: #fff !important;
  }

  /* =========================
     LISTA + SEPARADORES (líneas blancas entre items)
     ========================= */
  .elementor-82 .elementor-element.elementor-element-2f6a791 nav.elementor-nav-menu--dropdown > ul.elementor-nav-menu{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .elementor-82 .elementor-element.elementor-element-2f6a791 nav.elementor-nav-menu--dropdown > ul.elementor-nav-menu > li{
    margin: 0 !important;
    border-bottom: 1px solid var(--vlf-line) !important;
  }

  /* Línea superior del primer item (debajo del header ya está la fija) */
  .elementor-82 .elementor-element.elementor-element-2f6a791 nav.elementor-nav-menu--dropdown > ul.elementor-nav-menu > li:first-child{
    border-top: 0 !important;
  }

  /* LINKS PRINCIPALES */
  .elementor-82 .elementor-element.elementor-element-2f6a791 nav.elementor-nav-menu--dropdown > ul.elementor-nav-menu > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    color: #fff !important;
    text-decoration: none !important;

    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;

    padding: 28px 18px !important;
    background: transparent !important;
  }

  /* =========================
     FLECHA SUBMENÚ (VISIBLE EN IPHONE)
     ========================= */
  .elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown .menu-item-has-children > a{
    position: relative !important;
    padding-right: 78px !important; /* espacio para flecha */
  }

  /* Elementor suele usar .sub-arrow (más fiable en iOS) */
  .elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown .menu-item-has-children > a .sub-arrow{
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;

    color: #fff !important;
    font-size: 30px !important;
    line-height: 1 !important;
  }

  /* Por si fuese SVG en vez de .sub-arrow */
  .elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-nav-menu--dropdown .menu-item-has-children > a svg{
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 28px !important;
    height: 28px !important;

    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;

    fill: #fff !important;
  }

  /* =========================
     SUBMENÚ EN NEGRO (sin blancos)
     ========================= */
  .elementor-82 .elementor-element.elementor-element-2f6a791 nav.elementor-nav-menu--dropdown .sub-menu{
    background: #000 !important;
    margin: 0 !important;
    padding: 0 0 14px !important;
  }

  .elementor-82 .elementor-element.elementor-element-2f6a791 nav.elementor-nav-menu--dropdown .sub-menu li{
    border-bottom: 1px solid #fff !important;
  }

  .elementor-82 .elementor-element.elementor-element-2f6a791 nav.elementor-nav-menu--dropdown .sub-menu a{
    background: transparent !important;
    color: #fff !important;

    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    padding: 14px 18px !important;
    display: block !important;
  }
}
@media (max-width: 1024px){
  /* Baja la primera línea para que no corte el logo */
  .elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-menu-toggle[aria-expanded="true"]
  + nav.elementor-nav-menu--dropdown::after{
    top: calc(var(--vlf-header) + var(--vlf-safe) + 12px) !important;
  }

  /* Compensa el padding del overlay para que el menú no baje más de la cuenta */
  .elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-menu-toggle[aria-expanded="true"]
  + nav.elementor-nav-menu--dropdown{
    padding-top: calc(var(--vlf-header) + var(--vlf-safe) + 12px) !important;
  }
}
@media (max-width: 1024px){

  /* 1) Header negro más alto para que el logo no se recorte */
  .elementor-82 .elementor-element.elementor-element-2f6a791{
    --vlf-safe: env(safe-area-inset-top);
    --vlf-header: 110px; /* súbelo si lo quieres aún más “aire” */
  }

  /* 2) Caja del logo (pseudo-elemento) */
  .elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-menu-toggle[aria-expanded="true"]
  + nav.elementor-nav-menu--dropdown::before{
    height: calc(var(--vlf-header) + var(--vlf-safe)) !important;
    padding-top: var(--vlf-safe) !important;

    background-size: auto 70% !important;  /* clave: no recorta */
    background-position: 16px calc(50% + (var(--vlf-safe) / 2)) !important;
    background-repeat: no-repeat !important;
  }

  /* 3) La línea superior baja un pelín para no tocar el logo */
  .elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-menu-toggle[aria-expanded="true"]
  + nav.elementor-nav-menu--dropdown::after{
    top: calc(var(--vlf-header) + var(--vlf-safe) + 8px) !important;
  }

  /* 4) El menú empieza justo después del header */
  .elementor-82 .elementor-element.elementor-element-2f6a791 .elementor-menu-toggle[aria-expanded="true"]
  + nav.elementor-nav-menu--dropdown{
    padding-top: calc(var(--vlf-header) + var(--vlf-safe) + 8px) !important;
  }
}
@media (max-width: 1024px){

  /* Quita líneas del LI (si las estabas poniendo ahí) */
  .elementor-82 .elementor-element.elementor-element-2f6a791 nav.elementor-nav-menu--dropdown > ul.elementor-nav-menu > li{
    border: 0 !important;
  }

  /* La línea queda justo debajo del título del item (Home, Cursos...) */
  .elementor-82 .elementor-element.elementor-element-2f6a791 nav.elementor-nav-menu--dropdown > ul.elementor-nav-menu > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    padding: 28px 22px !important;

    border-bottom: 1px solid #ffffff !important;
    box-sizing: border-box !important;
  }

  /* Línea ENTRE "Cursos" y el primer subitem */
  .elementor-82 .elementor-element.elementor-element-2f6a791 nav.elementor-nav-menu--dropdown > ul.elementor-nav-menu > li.menu-item-has-children > .sub-menu{
    border-top: 1px solid rgba(255,255,255,.28) !important;
    margin-top: 0 !important;
    padding-top: 18px !important; /* aire para que no quede pegado */
  }

  /* Ajuste de padding de los subitems para que respiren */
  .elementor-82 .elementor-element.elementor-element-2f6a791 nav.elementor-nav-menu--dropdown .sub-menu a{
    display: block !important;
    padding: 14px 22px !important;
  }
}/* End custom CSS */