/*
Theme Name: Tema Licencias WP Online
Theme URI: https://licencias-wp.online/
Template: hello-elementor
Author: Licencias WP Online
Author URI: https://licencias-wp.online/
Description: 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 Editor 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: 1.1.1742682569
Updated: 2025-03-22 22:29:29

*/


/* ==========================================================================
   FIX: Color del menú del header - Licencias WP Online
   Fecha: 2026-06-11
   Problema: Las letras del menú son blancas sobre fondo blanco (invisibles)
   Solución: Cambiar a morado corporativo #230069 con hover #8C54FC
   ========================================================================== */

/* Menú principal desktop (e5f6g7h) */
.elementor-21 .elementor-element-e5f6g7h .elementor-nav-menu--main .elementor-item,
.elementor-21 .elementor-element-e5f6g7h .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-21 .elementor-element-e5f6g7h .elementor-nav-menu--main .elementor-item.highlighted {
  color: #230069 !important;
  fill: #230069 !important;
}

/* Menú secundario / dropdown-tablet (q4r5s6t) */
.elementor-21 .elementor-element-q4r5s6t .elementor-nav-menu--main .elementor-item,
.elementor-21 .elementor-element-q4r5s6t .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-21 .elementor-element-q4r5s6t .elementor-nav-menu--main .elementor-item.highlighted {
  color: #230069 !important;
  fill: #230069 !important;
}

/* Hover: morado accent #8C54FC (en ambos menús) */
.elementor-21 .elementor-element-e5f6g7h .elementor-nav-menu--main .elementor-item:hover,
.elementor-21 .elementor-element-q4r5s6t .elementor-nav-menu--main .elementor-item:hover,
.elementor-21 .elementor-element-e5f6g7h .elementor-nav-menu--main .elementor-item:focus,
.elementor-21 .elementor-element-q4r5s6t .elementor-nav-menu--main .elementor-item:focus {
  color: #8C54FC !important;
  fill: #8C54FC !important;
}

/* Dropdown mobile/tablet (color del texto del submenú) */
.elementor-21 .elementor-element-e5f6g7h .elementor-nav-menu--dropdown .elementor-item,
.elementor-21 .elementor-element-e5f6g7h .elementor-nav-menu--dropdown .elementor-sub-item,
.elementor-21 .elementor-element-q4r5s6t .elementor-nav-menu--dropdown .elementor-item,
.elementor-21 .elementor-element-q4r5s6t .elementor-nav-menu--dropdown .elementor-sub-item {
  color: #230069 !important;
  fill: #230069 !important;
}

/* ==========================================================================
   FIX 2: Menú hamburguesa MODERNO en tablet/móvil
   - Botón elegante con animación suave a X
   - Panel desplegable desde arriba con animación
   - Items grandes, con iconos y separados
   - Overlay oscuro semi-transparente
   ========================================================================== */

/* --- DESKTOP: menú horizontal en una línea --- */
@media (min-width: 1025px) {
  .elementor-21 .elementor-element-e5f6g7h .elementor-nav-menu--main .elementor-item,
  .elementor-21 .elementor-element-q4r5s6t .elementor-nav-menu--main .elementor-item {
    font-size: 13px !important;
    padding: 5px 6px !important;
    white-space: nowrap !important;
  }
  /* Ocultar toggle y overlay en desktop */
  .lwp-mobile-menu-toggle,
  .lwp-mobile-menu-overlay,
  .lwp-mobile-menu-panel { display: none !important; }
}

/* --- TABLET/MÓVIL: toggle + overlay + panel --- */
@media (max-width: 1024px) {

  /* OCULTAR el menú horizontal desktop (sigue ahí en el DOM, solo lo ocultamos) */
  .elementor-21 .elementor-element-a1b2c3d {
    display: none !important;
  }

  /* === BOTÓN HAMBURGUESA === */
  .lwp-mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #8C54FC 0%, #6B3DD8 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-left: 8px;
    padding: 0;
    box-shadow: 0 4px 12px rgba(140, 84, 252, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
  }
  .lwp-mobile-menu-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(140, 84, 252, 0.4);
  }
  .lwp-mobile-menu-toggle:active {
    transform: scale(0.95);
  }
  .lwp-mobile-menu-toggle .lwp-bars {
    display: inline-block;
    width: 22px;
    height: 16px;
    position: relative;
  }
  .lwp-mobile-menu-toggle .lwp-bars::before,
  .lwp-mobile-menu-toggle .lwp-bars::after,
  .lwp-mobile-menu-toggle .lwp-bars span {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.5px;
    background: #FFFFFF;
    border-radius: 3px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s,
                top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .lwp-mobile-menu-toggle .lwp-bars::before { top: 0; }
  .lwp-mobile-menu-toggle .lwp-bars span {
    top: 50%;
    margin-top: -1.25px;
    display: block;
  }
  .lwp-mobile-menu-toggle .lwp-bars::after { bottom: 0; }
  /* Animación a X cuando está activo */
  .lwp-mobile-menu-toggle.is-active .lwp-bars::before {
    top: 50%;
    margin-top: -1.25px;
    transform: rotate(45deg);
  }
  .lwp-mobile-menu-toggle.is-active .lwp-bars span { opacity: 0; }
  .lwp-mobile-menu-toggle.is-active .lwp-bars::after {
    bottom: auto;
    top: 50%;
    margin-top: -1.25px;
    transform: rotate(-45deg);
  }

  /* === OVERLAY OSCURO === */
  .lwp-mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(35, 0, 105, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .lwp-mobile-menu-overlay.is-open {
    display: block;
    opacity: 1;
  }

  /* === PANEL DESPLEGABLE === */
  .lwp-mobile-menu-panel {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-height: 80vh;
    background: #FFFFFF;
    box-shadow: 0 12px 40px rgba(35, 0, 105, 0.25);
    z-index: 9999;
    padding: 0;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lwp-mobile-menu-panel.is-open {
    transform: translateY(0);
  }

  /* Cabecera del panel */
  .lwp-mobile-menu-panel::before {
    content: "Menú";
    display: block;
    padding: 24px 24px 12px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #8C54FC;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 1px solid rgba(140, 84, 252, 0.15);
  }

  .lwp-mobile-menu-panel ul {
    list-style: none;
    margin: 0;
    padding: 8px 0 16px;
  }
  .lwp-mobile-menu-panel li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(140, 84, 252, 0.08);
  }
  .lwp-mobile-menu-panel li:last-child {
    border-bottom: none;
  }
  .lwp-mobile-menu-panel a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    color: #230069 !important;
    text-decoration: none;
    font-family: "Poppins", "Roboto", sans-serif;
    font-size: 17px;
    font-weight: 600;
    transition: background 0.2s, color 0.2s, padding-left 0.2s;
    position: relative;
  }
  /* Icono emoji/símbolo antes de cada item */
  .lwp-mobile-menu-panel a::before {
    content: "";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(140, 84, 252, 0.1);
    border-radius: 10px;
    font-size: 18px;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.2s;
  }
  /* Iconos específicos por item */
  .lwp-mobile-menu-panel li:nth-child(1) a::before { content: "🛒"; background: rgba(140, 84, 252, 0.12); }
  .lwp-mobile-menu-panel li:nth-child(2) a::before { content: "ℹ️"; background: rgba(140, 84, 252, 0.12); }
  .lwp-mobile-menu-panel li:nth-child(3) a::before { content: "📰"; background: rgba(140, 84, 252, 0.12); }
  .lwp-mobile-menu-panel li:nth-child(4) a::before { content: "❓"; background: rgba(140, 84, 252, 0.12); }

  .lwp-mobile-menu-panel a:hover,
  .lwp-mobile-menu-panel a:focus,
  .lwp-mobile-menu-panel a:active {
    background: linear-gradient(90deg, rgba(140, 84, 252, 0.08) 0%, transparent 100%);
    color: #8C54FC !important;
    padding-left: 32px;
  }
  .lwp-mobile-menu-panel a:hover::before,
  .lwp-mobile-menu-panel a:focus::before {
    background: #8C54FC;
    transform: scale(1.1);
  }

  /* === MEJORAS EN EL HEADER MÓVIL === */
  /* Asegurar que el contenedor mobile tiene buen espaciado */
  .elementor-element-523aa06 .e-con-inner {
    gap: 12px !important;
  }
  /* Hacer el header mobile un poco más alto y con padding lateral */
  .elementor-element-523aa06 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}