/* 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
*/
/* =============================================================
   EDISON ELECTRONICS — Sistema de diseño · CSS
   Paleta corregida según manual de marca (#025A64)
   ============================================================= */

:root {
  /* ---------- Colores ---------- */

  /* Primario: color del manual de marca Edison_COMMS26 */
  --edison-primary:        #025A64; /* HSL(186°, 96%, 20%) — base */
  --edison-primary-dark:   #02434B; /* L -5% — hover botón / sweep */
  --edison-primary-darker: #013137; /* L -9% — círculo icono (opción B) */
  --edison-primary-deep:   #011F23; /* L -13% — nivel extra si hace falta */

  /* Washes claros derivados */
  --edison-primary-soft:   #DDEDEE; /* fondos suaves, badges */
  --edison-primary-100:    #D6E9EB; /* bordes sutiles */

  /* Neutros */
  --edison-text:       #1A1A1A;
  --edison-text-muted: #666666;
  --edison-bg:         #FFFFFF;
  --edison-bg-soft:    #F5F5F5;
  --edison-bg-dark:    #0F1518; /* fondo casi negro para hero/cards dark */
  --edison-border:     #E5E5E5;

  /* ---------- Tipografía ---------- */
  --edison-font: 'Source Sans 3', sans-serif;

  --fs-display: clamp(40px, 5.5vw, 72px);
  --fs-h1:      clamp(36px, 4.2vw, 56px);
  --fs-h2:      clamp(28px, 3.2vw, 40px);
  --fs-h3:      clamp(22px, 2.2vw, 28px);
  --fs-h4:      clamp(18px, 1.7vw, 22px);
  --fs-stats:   clamp(44px, 5vw, 64px);
  --fs-body-lg: clamp(16px, 1.3vw, 18px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-label:   13px;

  /* ---------- Espaciado ---------- */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 80px;
  --space-4xl: 120px;

  /* ---------- Layout ---------- */
  --container-max:    1280px;
  --container-narrow: 800px;
  --container-wide:   1440px;
  --gutter: 24px;

  /* ---------- Radius ---------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-teal:  0 8px 24px rgba(2, 90, 100, 0.25); /* actualizado al nuevo primario */

  /* ---------- Transiciones ---------- */
  --transition: all 0.25s ease;
}


/* =============================================================
   BOTONES
   ============================================================= */

/* ------- 1. Primario (.edison-btn) ------- */
.edison-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 28px;
  background: var(--edison-primary);
  color: #FFFFFF !important;
  font-family: var(--edison-font);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-pill);
  min-height: 52px;
  transition: background 0.3s ease;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.3px;
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
}

.edison-btn-text {
  position: relative;
  z-index: 2;
  line-height: 1;
}

.edison-btn-icon {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--edison-primary-darker);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  transition: background 0.3s ease;
}

.edison-btn-icon svg {
  width: 14px;
  height: 14px;
  color: #FFFFFF;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sweep de hover */
.edison-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--edison-primary-dark);
  border-radius: var(--radius-pill);
  transform: translateX(-101%);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 1;
}
.edison-btn:hover::before { transform: translateX(0); }
.edison-btn:hover         { color: #FFFFFF !important; }

.edison-btn:hover .edison-btn-icon {
  background: var(--edison-primary-deep);
}

.edison-btn:hover .edison-btn-icon svg {
  animation: edisonArrow 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes edisonArrow {
  0%   { transform: translate(0, 0); }
  45%  { transform: translate(16px, -16px); opacity: 0; }
  46%  { transform: translate(-16px, 16px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}


/* ------- 2. Tamaño pequeño ------- */
.edison-btn--sm {
  font-size: 14px;
  min-height: 46px;
  padding: 6px 6px 6px 22px;
  gap: 12px;
}
.edison-btn--sm .edison-btn-icon { width: 32px; height: 32px; }
.edison-btn--sm .edison-btn-icon svg { width: 12px; height: 12px; }


/* ------- 3. Variante dark (sobre imagen / fondo oscuro) ------- */
.edison-btn--dark {
  background: var(--edison-bg-dark);
  color: #FFFFFF !important;
}
.edison-btn--dark::before { background: #1F2A2E; }
.edison-btn--dark .edison-btn-icon { background: var(--edison-primary); }
.edison-btn--dark:hover .edison-btn-icon { background: var(--edison-primary-dark); }


/* ------- 4. Variante light (sobre fondo teal) ------- */
.edison-btn--light {
  background: #FFFFFF;
  color: var(--edison-text) !important;
}
.edison-btn--light::before { background: #F5F5F5; }
.edison-btn--light:hover    { color: var(--edison-text) !important; }
.edison-btn--light .edison-btn-icon { background: var(--edison-primary); }
.edison-btn--light:hover .edison-btn-icon { background: var(--edison-primary-dark); }


/* ------- 5. FAB circular (teléfono, mail, chat) ------- */
.edison-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--edison-primary);
  color: #FFFFFF;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease;
}
.edison-fab:hover {
  background: var(--edison-primary-dark);
  transform: translateY(-2px);
}
.edison-fab svg { width: 20px; height: 20px; }


/* ------- 6. Link con flecha (tercer nivel de acción) ------- */
.edison-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--edison-text);
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--edison-text);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.edison-link:hover {
  color: var(--edison-primary);
  border-color: var(--edison-primary);
}
.edison-link svg { width: 14px; height: 14px; }


/* =============================================================
   2. SELECTOR DE IDIOMA (top bar)
   ============================================================= */

.edisone-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.edisone-lang-switcher .lang-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    padding: 4px 2px;
    transition: color 0.2s ease;
    text-transform: uppercase;
}

.edisone-lang-switcher .lang-link:hover,
.edisone-lang-switcher .lang-link.is-active { color: #FFFFFF; }

.edisone-lang-switcher .lang-sep {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 400;
    user-select: none;
}


/* =============================================================
   3. TOP BAR en mobile: ocultar
   ============================================================= */

@media (max-width: 767px) {
    #top-bar { display: none !important; }
}


/* =============================================================
   4. DESKTOP (≥1151px)
   ============================================================= */

@media (min-width: 1151px) {
    #edisone-main-menu .elementor-menu-toggle { display: none !important; }
    .edisone-offcanvas-footer { display: none !important; }
}


/* =============================================================
   5. MATAR SOMBRA FANTASMA del widget Nav Menu en todos los breakpoints
   (viene del editor visual, alta especificidad)
   ============================================================= */

#edisone-main-menu nav.elementor-nav-menu--dropdown,
#edisone-main-menu.elementor-widget-nav-menu nav.elementor-nav-menu--dropdown {
    box-shadow: none !important;
}


/* =============================================================
   6. OFFCANVAS — MOBILE / TABLET (<1150px)
   ============================================================= */

@media (max-width: 1150px) {

    #edisone-main-menu nav.elementor-nav-menu--main { display: none !important; }
    .edison-btn-header-main { display: none !important; }

    /* Hamburguesa animada */
    #edisone-main-menu .elementor-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        cursor: pointer;
        position: relative;
        z-index: 10001 !important;
        padding: 0 !important;
    }

    #edisone-main-menu .elementor-menu-toggle svg { display: none !important; }

    #edisone-main-menu .elementor-menu-toggle::before,
    #edisone-main-menu .elementor-menu-toggle::after {
        content: "";
        position: absolute;
        width: 24px;
        height: 2px;
        background: #1A1A1A;
        border-radius: 2px;
        left: 8px;
        transform-origin: center;
        transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
                    top 0.25s ease,
                    background 0.25s ease;
    }

    #edisone-main-menu .elementor-menu-toggle::before { top: 14px; }
    #edisone-main-menu .elementor-menu-toggle::after  { top: 24px; }

    #edisone-main-menu .elementor-menu-toggle .edisone-burger-mid {
        position: absolute;
        width: 24px;
        height: 2px;
        background: #1A1A1A;
        border-radius: 2px;
        top: 19px;
        left: 8px;
        transition: transform 0.25s ease, opacity 0.2s ease, background 0.25s ease;
    }

    #edisone-main-menu .elementor-menu-toggle.elementor-active::before {
        top: 19px;
        transform: rotate(45deg);
        background: var(--edison-primary);
    }
    #edisone-main-menu .elementor-menu-toggle.elementor-active::after {
        top: 19px;
        transform: rotate(-45deg);
        background: var(--edison-primary);
    }
    #edisone-main-menu .elementor-menu-toggle.elementor-active .edisone-burger-mid {
        opacity: 0;
        transform: scaleX(0);
    }

    /* Panel offcanvas: padding-top controlado por variable CSS
       El JS asigna --edisone-header-h con el alto real del header */
    #edisone-main-menu nav.elementor-nav-menu--dropdown {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: 0 !important;
        width: min(420px, 88vw) !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #FFFFFF !important;
        z-index: 9999 !important;
        padding: calc(var(--edisone-header-h, 136px) + 16px) 0 120px 0 !important;
        margin: 0 !important;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        box-shadow: -20px 0 60px rgba(0, 0, 0, 0.15) !important;
    }

    #edisone-main-menu .elementor-menu-toggle[aria-expanded="true"] ~ nav.elementor-nav-menu--dropdown,
    #edisone-main-menu .elementor-menu-toggle.elementor-active ~ nav.elementor-nav-menu--dropdown {
        transform: translateX(0) !important;
        display: block !important;
    }

    /* Lista del offcanvas */
    #edisone-main-menu nav.elementor-nav-menu--dropdown ul.elementor-nav-menu {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    #edisone-main-menu nav.elementor-nav-menu--dropdown ul.elementor-nav-menu li {
        width: 100% !important;
        border: none !important;
        margin: 0 !important;
    }

    /* Ítems */
    #edisone-main-menu nav.elementor-nav-menu--dropdown ul.elementor-nav-menu > li > a {
        padding: 18px 24px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #1A1A1A !important;
        background: transparent !important;
        border-bottom: 1px solid #F0F0F0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        transition: color 0.25s ease, background 0.25s ease;
        text-decoration: none !important;
    }

    #edisone-main-menu nav.elementor-nav-menu--dropdown ul.elementor-nav-menu > li > a:hover {
        color: var(--edison-primary) !important;
        background: #FAFAFA !important;
    }

    /* Caret */
    #edisone-main-menu nav.elementor-nav-menu--dropdown .sub-arrow {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 24px !important;
        height: 24px !important;
        background: transparent !important;
        color: #666 !important;
        transition: transform 0.35s ease, color 0.25s ease;
        flex-shrink: 0;
        margin-left: 12px;
    }

    #edisone-main-menu nav.elementor-nav-menu--dropdown .sub-arrow svg {
        display: block !important;
        width: 12px !important;
        height: 12px !important;
        fill: currentColor !important;
    }

    #edisone-main-menu nav.elementor-nav-menu--dropdown li.edisone-open > a .sub-arrow {
        transform: rotate(180deg);
        color: var(--edison-primary) !important;
    }

    #edisone-main-menu nav.elementor-nav-menu--dropdown li.edisone-open > a {
        color: var(--edison-primary) !important;
    }

    /* Sub-menú (acordeón animado) */
    #edisone-main-menu nav.elementor-nav-menu--dropdown ul.sub-menu {
        background: #F7F7F7 !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        display: block !important;
        visibility: visible !important;
        overflow: hidden !important;
        height: 0;
        transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #edisone-main-menu nav.elementor-nav-menu--dropdown ul.sub-menu li a {
        padding: 13px 24px 13px 40px !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #666 !important;
        border-bottom: 1px solid #ECECEC !important;
        display: block !important;
        text-decoration: none !important;
    }

    #edisone-main-menu nav.elementor-nav-menu--dropdown ul.sub-menu li a:hover {
        color: var(--edison-primary) !important;
        background: #F0F0F0 !important;
    }

    /* Overlay + body lock */
    body.edisone-menu-open { overflow: hidden; }

    body.edisone-menu-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        animation: edisonFadeIn 0.3s ease forwards;
    }

    @keyframes edisonFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Footer del offcanvas */
    .edisone-offcanvas-footer {
        position: fixed !important;
        bottom: 0 !important;
        right: 0 !important;
        width: min(420px, 88vw) !important;
        padding: 20px 24px !important;
        background: #FAFAFA !important;
        border-top: 1px solid #E5E5E5 !important;
        z-index: 10000 !important;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    body.edisone-menu-open .edisone-offcanvas-footer {
        transform: translateX(0);
    }

    .edisone-offcanvas-lang {
        display: flex;
        justify-content: center;
        gap: 8px;
        font-family: 'Source Sans 3', sans-serif;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.5px;
    }

    .edisone-offcanvas-lang .lang-link {
        color: rgba(0, 0, 0, 0.5);
        text-decoration: none;
        padding: 4px 6px;
        text-transform: uppercase;
        transition: color 0.2s ease;
    }

    .edisone-offcanvas-lang .lang-link:hover,
    .edisone-offcanvas-lang .lang-link.is-active { color: #1A1A1A; }

    .edisone-offcanvas-lang .lang-sep { color: rgba(0, 0, 0, 0.2); }
}