/* =====================================================
   MAIN MENU - Creativos Xalapa
   Archivo: /templates/shaper_helixultimate/css/custom.css
   ===================================================== */

:root{
  --cx-barra: #4EC1E6;          /* color de la barra al bajar */
  --cx-texto-scroll: #0d2b36;   /* color del texto al bajar */
  --cx-alto: 96px;              /* altura de la barra arriba */
  --cx-alto-scroll: 76px;       /* altura de la barra al bajar */
  --cx-logo: 64px;              /* tamaño del logo arriba */
  --cx-logo-scroll: 52px;       /* tamaño del logo al bajar */
}

/* ===== 1. Barra flotante; centra su contenido en vertical ===== */
body #sp-header{
  position: fixed;
  top: 0; left: 0; width: 100%;
  height: var(--cx-alto);
  display: flex;
  align-items: center;
  background-color: transparent;
  box-shadow: none;
  z-index: 999;
}
body #sp-header > .container,
body #sp-header > .container-fluid{ width: 100%; }
#sp-header .row{ align-items: center; flex-wrap: nowrap; }
.sticky-wrapper{ height: 0 !important; }

/* ===== 2. Logo ===== */
#sp-header .logo{
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
#sp-header .logo a{
  display: block;
  width: var(--cx-logo);
  height: var(--cx-logo);
  background: url("/images/media/logos/logo_colores.png") center / contain no-repeat;
}
#sp-header .logo a img{ display: none !important; }

/* ===== 3. Menú: nunca se parte en dos líneas ===== */
body #sp-header .sp-megamenu-parent > li > a{
  height: auto !important;
  line-height: 1.2 !important;
  padding: 10px 18px;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
}

/* ===== 4. Menú centrado (solo escritorio) ===== */
@media (min-width: 992px){
  #offcanvas-toggler{ display: none !important; }

  #sp-menu{ flex: 1 1 auto; }
  #sp-menu .sp-column{
    width: 100%;
    justify-content: center !important;
  }
  #sp-menu .sp-megamenu-parent{
    display: flex !important;        /* le gana al d-lg-block de Bootstrap */
    flex-wrap: nowrap;
    margin: 0;
  }
}

/* ===== 5. Botones de redes (Facebook / Instagram) ===== */
@media (min-width: 992px){
  body #sp-header .social-icons{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  body #sp-header .social-icons li{ margin: 0; }
  body #sp-header .social-icons li a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #fff;
    color: var(--cx-texto-scroll);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    font-size: 18px;
    transition: transform .2s ease;
  }
  body #sp-header .social-icons li a:hover{ transform: translateY(-2px); }
}

/* ===== 6. Efecto al bajar (depende del scroll, sin JavaScript) ===== */
@keyframes cx-barra{
  to{
    background-color: var(--cx-barra);
    height: var(--cx-alto-scroll);
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
  }
}
@keyframes cx-texto{ to{ color: var(--cx-texto-scroll); } }
@keyframes cx-logo{
  to{ width: var(--cx-logo-scroll); height: var(--cx-logo-scroll); }
}

@supports (animation-timeline: scroll()){
  body #sp-header{
    animation: cx-barra linear both;
    animation-timeline: scroll(root);
    animation-range: 0 80px;
  }
  body #sp-header .sp-megamenu-parent > li > a{
    animation: cx-texto linear both;
    animation-timeline: scroll(root);
    animation-range: 0 80px;
  }
  #sp-header .logo a{
    animation: cx-logo linear both;
    animation-timeline: scroll(root);
    animation-range: 0 80px;
  }
}

/* ===== 7. Respaldo: navegadores sin scroll-driven animations =====
   (barra celeste fija, para que el menú nunca se pierda sobre fondo blanco) */
@supports not (animation-timeline: scroll()){
  body #sp-header{
    background-color: var(--cx-barra);
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
  }
  body #sp-header .sp-megamenu-parent > li > a{ color: var(--cx-texto-scroll); }
  body #sp-header #offcanvas-toggler .burger-icon > span{
    background-color: var(--cx-texto-scroll);
  }
}

/* ===== 8. CELULAR Y TABLET (solo hasta 991px; no afecta escritorio) ===== */
@keyframes cx-burger{ to{ background-color: var(--cx-texto-scroll); } }

@media (max-width: 991px){
  :root{
    --cx-alto: 72px;
    --cx-alto-scroll: 60px;
    --cx-logo: 46px;
    --cx-logo-scroll: 38px;
  }

  body #sp-header .container,
  body #sp-header .container-fluid{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Sin logo en celular y tablet (solo se oculta el logo, no la hamburguesa) */
  body #sp-header .logo{ display: none !important; }

  /* Hamburguesa: blanca arriba, oscura al bajar */
  body #sp-header #offcanvas-toggler .burger-icon > span{
    background-color: #fff;
  }

  /* Botones de redes: más chicos, blancos sólidos */
  body #sp-header .social-icons{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  body #sp-header .social-icons li{ margin: 0; }
  body #sp-header .social-icons li a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #fff;
    color: var(--cx-texto-scroll);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    font-size: 15px;
  }

  @supports (animation-timeline: scroll()){
    body #sp-header #offcanvas-toggler .burger-icon > span{
      animation: cx-burger linear both;
      animation-timeline: scroll(root);
      animation-range: 0 80px;
    }
  }
}

/* ===== 9. Páginas con fondo claro arriba: barra celeste desde el inicio =====
   Para agregar otra página: duplica el selector con su número, por ejemplo
   body.itemid-332 #sp-header, body.itemid-NNN #sp-header { ... } */
body.itemid-332 #sp-header{
  animation: none;
  background-color: var(--cx-barra);
  height: var(--cx-alto-scroll);
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
body.itemid-332 #sp-header .sp-megamenu-parent > li > a{
  animation: none;
  color: var(--cx-texto-scroll);
}
body.itemid-332 #sp-header .logo a{
  animation: none;
  width: var(--cx-logo-scroll);
  height: var(--cx-logo-scroll);
}
body.itemid-332 #sp-header #offcanvas-toggler .burger-icon > span{
  animation: none;
  background-color: var(--cx-texto-scroll);
}