/***********************************************************
 * Header Before
 ***********************************************************
 */
header.site-header {
  background-color: transparent !important;
  padding: 0px 0px !important;
  margin: 0px !important;
}

header .header-before {
  padding: 10px 0px;
}


/* logo */
header .site-branding {
  margin: 0px !important;
}

header .site-branding a {}

header .site-branding a img {
  width: 100%;
  max-width: 140px !important;
}

/* redes sociales */
header .w-header2-redes-sociales {
  text-align: right;
}

header .w-header2-redes-sociales a {}

header .w-header2-redes-sociales a:hover img {
  filter: brightness(0.7);
}

header .w-header2-redes-sociales a img {
  width: 50px;
  display: inline-block;
  margin: 0px !important;
}

/* wrap-info */
header .wrap-info {
  margin-top: 30px;
  display: flex;
  gap: 20px;
  align-items: center;
}

/* portafolio */
header .wrap-info .w-header2-portafolio a {
  flex: 1;

  display: flex;
  align-items: center;
  color: #000000;
  font-size: 24px;
  line-height: 1;
}

header .wrap-info .w-header2-portafolio a:hover {
  transition: color 0.3s, text-shadow 0.3s;
  color: #f57b0b;
  text-shadow: 0 0 8px #fbf420, 0 0 16px #f57b0b;
}

header .wrap-info .w-header2-portafolio a img {
  width: 40px;
  display: inline-block;
  margin: 0px !important;
}

header .wrap-info .w-header2-portafolio a span {}

/* soporte email */
header .wrap-info.w-header2-soporte {
  flex: 1;
}

header .wrap-info .w-header2-soporte a {}

header .wrap-info .w-header2-soporte a:hover {
  background-color: #ffffff !important;
  color: #F60 !important;
}

header .wrap-info .w-header2-soporte a.soporte {
  display: block;
  background-color: #F60;
  color: #ffffff;
  padding: 2px 14px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 18px;
  border: 1px solid #F60;
  line-height: 1;
}

header .wrap-info .w-header2-soporte a.contacto {
  display: block;
  background-color: #F60;
  color: #ffffff;
  padding: 2px 14px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  border: 1px solid #F60;
  margin-top: 5px;
}

/* telefonos */
header .wrap-info .w-header2-telefono {
  flex: 1;
}

header .wrap-info .w-header2-telefono .wrap-telefonos {
  display: flex;
  gap: 2px;
  align-items: center;
}

header .wrap-info .w-header2-telefono .wrap-telefonos .icono {
  flex: 1;
  text-align: right;
}

header .wrap-info .w-header2-telefono .wrap-telefonos .icono img {
  width: 50px;
  display: inline-block;
  margin: 0px !important;
}

header .wrap-info .w-header2-telefono .wrap-telefonos .telefonos {
  flex: 2;
  text-align: right;
}

header .wrap-info .w-header2-telefono .wrap-telefonos .telefonos a {
  color: #000000;
  font-size: 20px;
  display: inline-block;
  line-height: 1;
}

header .wrap-info .w-header2-telefono .wrap-telefonos .telefonos a:hover {
  transition: color 0.3s, text-shadow 0.3s;
  color: #f57b0b;
  text-shadow: 0 0 8px #fbf420, 0 0 16px #f57b0b;
}

/***************************************************************************
 *  Header - Middle
 ***************************************************************************
 */
/* Header Middle */
.header-middle {
  background-color: #f57b0b;
  margin: 0;
  box-shadow: inset 0px -15px 0px 0px #fbf420;
}

/* Ubermenu - estilos generales */
ul.ubermenu-nav>li {
  vertical-align: middle !important;
  display: table-cell !important;
}

ul.ubermenu-nav>li>a {
  height: auto !important;
  text-align: center;
  padding: 15px 16px 15px 16px !important;
}

ul.ubermenu-nav>li>a>span {
  color: #ffffff !important;
  font-weight: 300 !important;
  text-transform: lowercase !important;
  line-height: 1 !important;
  font-size: 16px !important;
}

ul.ubermenu-nav>li>a .fa-angle-down:before {
  content: "\f107";
  color: #ffffff !important;
}

/* Ubermenu - colores de fondo por item */
ul.ubermenu-nav>li:nth-child(1) {
  background-color: #f57b0b;
  border-bottom: 15px solid #fbf420;
}

ul.ubermenu-nav>li:nth-child(2) {
  background-color: #f57202;
  border-bottom: 15px solid #fae303;
}

ul.ubermenu-nav>li:nth-child(3) {
  background-color: #f56601;
  border-bottom: 15px solid #f8cd04;
}

ul.ubermenu-nav>li:nth-child(4) {
  background-color: #f55c02;
  border-bottom: 15px solid #f7b803;
}

ul.ubermenu-nav>li:nth-child(5) {
  background-color: #f14601;
  border-bottom: 15px solid #f69301;
}

ul.ubermenu-nav>li:nth-child(6) {
  background-color: #db4100;
  border-bottom: 15px solid #f68702;
}

ul.ubermenu-nav>li:nth-child(7) {
  background-color: #c73600;
  border-bottom: 15px solid #f57301;
}

ul.ubermenu-nav>li:nth-child(8) {
  background-color: #a02900;
  border-bottom: 15px solid #f55a03;
}

ul.ubermenu-nav>li:nth-child(9) {
  background-color: #850200;
  border-bottom: 15px solid #f40903;
}

ul.ubermenu-nav>li:nth-child(10) {
  background-color: #6e0100;
  border-bottom: 15px solid #da0200;
}

/* Ubermenu - primer item: icono home */
ul.ubermenu-nav>li:nth-child(1) a {
  font-size: 0px;
}

ul.ubermenu-nav>li:nth-child(1) a:after {
  /* content: url(./assets/img/header/home.png); */
  content: url(../../img/header/home.png);

}

ul.ubermenu-nav>li:nth-child(1) a span {
  display: none;
}

/* Ubermenu - padding especial para el último */
ul.ubermenu-nav>li:nth-child(10)>a {
  padding: 15px 25px 15px 16px !important;
}

/* Ubermenu - responsive toggle */
.ubermenu-skin-minimal.ubermenu-responsive-toggle {
  color: #ffffff;
  font-family: Gothic;
}

/* Ubermenu - submenu estilos */
.ubermenu-nojs.ubermenu-skin-minimal .ubermenu-submenu .ubermenu-tabs .ubermenu-tab:hover>.ubermenu-target,
.ubermenu-skin-minimal .ubermenu-submenu .ubermenu-tab.ubermenu-active>.ubermenu-target {
  background: #eeeeee;
  color: #f56223;
  font-size: 15px;
}

.ubermenu-skin-minimal .ubermenu-submenu,
.ubermenu-skin-minimal .ubermenu-submenu .ubermenu-target {
  color: #333333;
  font-size: 15px;
}


/* Animations */
@keyframes wiggle {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(10deg);
  }
}

/* Logo Animation */
header .site-branding a img {
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

header .site-branding a:hover img {
  transform: scale(1.05);
}

/* Social Icons Animation */
header .w-header2-redes-sociales a {
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: inline-block;
  /* Ensure transform works */
}

header .w-header2-redes-sociales a:hover {
  transform: translateY(-3px);
  filter: brightness(1.2) !important;
  /* Override existing filter */
}

/* Portfolio Animation */
header .wrap-info .w-header2-portafolio a i,
header .wrap-info .w-header2-portafolio a img {
  transition: transform 0.5s ease-in-out;
}

header .wrap-info .w-header2-portafolio a:hover i,
header .wrap-info .w-header2-portafolio a:hover img {
  animation: wiggle 0.5s ease-in-out;
}

/* Buttons (Soporte/Contacto) Animation */
header .wrap-info .w-header2-soporte a {
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

header .wrap-info .w-header2-soporte a:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(245, 123, 11, 0.3) !important;
  /* Orange shadow */
}

/* Phones Animation */
header .wrap-info .w-header2-telefono .wrap-telefonos .icono img {
  transition: transform 0.5s ease-in-out;
}

header .wrap-info .w-header2-telefono .wrap-telefonos:hover .icono img {
  animation: wiggle 0.5s ease-in-out;
}