/* ==========================================================
   FOXAKA — HEADER GLOBAL
   Archivo: /css/header.css
   ========================================================== */


/* ==========================================================
   NAV PRINCIPAL
   ========================================================== */

.foxaka-header-nav {
  position: fixed;

  top: clamp(16px, 2.4vw, 24px);

  left: 50%;

  transform: translateX(-50%);

  z-index: 60;

  display: flex;

  align-items: center;

  gap: 4px;

  padding: 7px 9px;

  border-radius: 100px;

  background: rgba(255, 255, 255, .4);

  backdrop-filter:
    blur(22px)
    saturate(180%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(180%);

  border:
    1px solid
    rgba(255, 255, 255, .55);

  box-shadow:
    0 10px 34px -14px rgba(10, 14, 12, .4),
    inset 0 1px 0 rgba(255, 255, 255, .7);
}


/* ==========================================================
   LINKS DEL NAV
   ========================================================== */

.foxaka-nav-link {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 9px 15px;

  border-radius: 100px;

  font-family:
    'Manrope',
    sans-serif;

  font-weight: 600;

  font-size: 14px;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

  color: #4a5163;

  background: transparent;

  transition:
    color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}


.foxaka-nav-link:hover {
  color: #1c2130;

  background:
    rgba(255, 255, 255, .28);
}


/* ==========================================================
   PÁGINA ACTIVA
   ========================================================== */

.foxaka-nav-link.active {
  color: #2f6bed;

  background:
    rgba(255, 255, 255, .72);

  font-weight: 700;

  box-shadow:
    0 6px 18px -12px
      rgba(40, 60, 110, .45),

    inset 0 1px 0
      rgba(255, 255, 255, .9);
}


.foxaka-nav-link.active:hover {
  color: #2f6bed;

  background:
    rgba(255, 255, 255, .82);
}


/* ==========================================================
   MENÚ HABILIDADES DESKTOP
   ========================================================== */

.foxaka-sk-menu {
  position: relative;

  display: inline-flex;
}


.foxaka-sk-trigger lucide-icon {
  transition:
    transform .2s ease;
}


.foxaka-sk-menu:hover
.foxaka-sk-trigger lucide-icon,
.foxaka-sk-menu:focus-within
.foxaka-sk-trigger lucide-icon {
  transform:
    rotate(180deg);
}


.foxaka-sk-panel {
  position: absolute;

  top: 100%;

  left: 50%;

  transform:
    translate(-50%, -6px);

  opacity: 0;

  visibility: hidden;

  padding-top: 14px;

  pointer-events: none;

  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease;
}


/* Mostrar desplegable */

[data-sk-menu]:hover [data-sk-panel],
[data-sk-menu]:focus-within [data-sk-panel] {
  opacity: 1;

  visibility: visible;

  transform:
    translate(-50%, 0);

  pointer-events: auto;
}


/* ==========================================================
   CAJA DEL DESPLEGABLE
   ========================================================== */

.foxaka-sk-dropdown {
  width:
    min(88vw, 450px);

  max-height:
    min(76vh, 650px);

  overflow-y: auto;

  overscroll-behavior: contain;

  padding: 10px;

  border-radius: 24px;

  background:
    rgba(244, 246, 252, .96);

  backdrop-filter:
    blur(24px)
    saturate(165%);

  -webkit-backdrop-filter:
    blur(24px)
    saturate(165%);

  border:
    1px solid
    rgba(120, 140, 190, .28);

  box-shadow:
    0 34px 80px -30px
    rgba(40, 60, 110, .5);

  display: flex;

  flex-direction: column;

  gap: 2px;
}


/* ==========================================================
   LINKS DE HABILIDADES
   ========================================================== */

.foxaka-skill-link {
  display: flex;

  align-items: center;

  gap: 13px;

  padding: 10px 13px;

  border-radius: 16px;

  text-decoration: none;

  transition:
    background .18s ease,
    transform .18s ease;
}


.foxaka-skill-link:hover {
  background:
    rgba(47, 107, 237, .08);

  transform:
    translateX(2px);
}


/* ==========================================================
   ICONO HABILIDAD
   ========================================================== */

.foxaka-skill-icon {
  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  border-radius: 11px;

  background:
    rgba(200, 120, 31, .12);

  border:
    1px solid
    rgba(200, 120, 31, .28);
}


.foxaka-skill-icon img {
  width: 20px;

  height: 20px;

  display: block;

  object-fit: contain;
}


/* ==========================================================
   TEXTO HABILIDAD
   ========================================================== */

.foxaka-skill-text {
  flex: 1;

  min-width: 0;
}


.foxaka-skill-title {
  display: block;

  font-size: 14px;

  font-weight: 600;

  color: #2b3040;

  line-height: 1.3;
}


.foxaka-skill-subtitle {
  display: block;

  margin-top: 1px;

  font-size: 12px;

  color: #7b8296;

  font-weight: 500;
}


.foxaka-skill-arrow {
  flex-shrink: 0;

  color: #a7aebd;

  font-size: 15px;

  line-height: 1;

  transition:
    color .18s ease,
    transform .18s ease;
}


.foxaka-skill-link:hover
.foxaka-skill-arrow {
  color: #2f6bed;

  transform:
    translateX(2px);
}


/* ==========================================================
   VER TODAS
   ========================================================== */

.foxaka-sk-all {
  margin-top: 4px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 12px;

  border-radius: 16px;

  background:
    rgba(47, 107, 237, .1);

  color: #2f6bed;

  font-family:
    'Manrope',
    sans-serif;

  font-weight: 700;

  font-size: 14px;

  text-decoration: none;

  transition:
    background .2s ease;
}


.foxaka-sk-all-top {
  margin-top: 0;

  margin-bottom: 4px;
}


.foxaka-sk-all:hover {
  color: #2f6bed;

  background:
    rgba(47, 107, 237, .16);
}


/* ==========================================================
   CTA RESERVA DESKTOP
   ========================================================== */

.foxaka-header-cta {
  position: fixed;

  top:
    clamp(16px, 2.4vw, 24px);

  right:
    clamp(16px, 4vw, 34px);

  z-index: 60;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 15px 22px;

  border-radius: 100px;

  background: #2f6bed;

  color: #fff;

  font-family:
    'Manrope',
    sans-serif;

  font-weight: 700;

  font-size: 14px;

  text-decoration: none;

  white-space: nowrap;

  box-shadow:
    0 6px 18px -6px
      rgba(47, 107, 237, .7),

    inset 0 1px 0
      rgba(255, 255, 255, .35);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}


.foxaka-header-cta:hover {
  color: #fff;

  background: #285fd8;

  transform:
    translateY(-1px);

  box-shadow:
    0 10px 24px -6px
      rgba(47, 107, 237, .85),

    inset 0 1px 0
      rgba(255, 255, 255, .35);
}


/* ==========================================================
   MENÚ MÓVIL
   ========================================================== */

.foxaka-mobile-menu {
  display: none;
}


.foxaka-mobile-trigger {
  list-style: none;

  position: fixed;

  top:
    clamp(16px, 2.4vw, 22px);

  right:
    clamp(16px, 4vw, 22px);

  z-index: 64;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, .72);

  backdrop-filter:
    blur(22px)
    saturate(170%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(170%);

  border:
    1px solid
    rgba(255, 255, 255, .72);

  color: #2b3040;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow:
    0 12px 34px -16px
    rgba(20, 35, 70, .42);
}


.foxaka-mobile-trigger::-webkit-details-marker,
.foxaka-mobile-skills-trigger::-webkit-details-marker {
  display: none;
}


.foxaka-mobile-menu[open]
.foxaka-mobile-trigger {
  color: #2f6bed;
}


.foxaka-mobile-panel {
  position: fixed;

  top: 76px;

  left: 14px;

  right: 14px;

  z-index: 63;

  max-height:
    calc(100vh - 94px);

  overflow-y: auto;

  overscroll-behavior: contain;

  padding: 12px;

  border-radius: 24px;

  background:
    rgba(244, 246, 252, .97);

  backdrop-filter:
    blur(28px)
    saturate(165%);

  -webkit-backdrop-filter:
    blur(28px)
    saturate(165%);

  border:
    1px solid
    rgba(255, 255, 255, .8);

  box-shadow:
    0 30px 80px -30px
    rgba(30, 50, 95, .55);
}


.foxaka-mobile-link,
.foxaka-mobile-skills-trigger {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 14px 15px;

  border-radius: 14px;

  font-family:
    'Manrope',
    sans-serif;

  font-size: 15px;

  font-weight: 700;

  line-height: 1.25;

  color: #2b3040;

  text-decoration: none;

  cursor: pointer;

  transition:
    background .18s ease,
    color .18s ease;
}


.foxaka-mobile-link:hover,
.foxaka-mobile-skills-trigger:hover {
  color: #2f6bed;

  background:
    rgba(47, 107, 237, .07);
}


.foxaka-mobile-skills {
  display: block;
}


.foxaka-mobile-skills-trigger {
  list-style: none;
}


.foxaka-mobile-skills-trigger lucide-icon {
  transition:
    transform .2s ease;
}


.foxaka-mobile-skills[open]
.foxaka-mobile-skills-trigger lucide-icon {
  transform:
    rotate(180deg);
}


.foxaka-mobile-skills-list {
  padding:
    4px 6px 8px 14px;

  display: flex;

  flex-direction: column;

  gap: 2px;
}


.foxaka-mobile-skills-list a {
  display: grid;

  grid-template-columns:
    28px minmax(0,1fr);

  align-items: start;

  gap: 8px;

  padding: 10px 12px;

  border-radius: 12px;

  color: #4a5163;

  font-family:
    'Manrope',
    sans-serif;

  font-size: 13.5px;

  font-weight: 600;

  line-height: 1.35;

  text-decoration: none;
}


.foxaka-mobile-skills-list a:hover {
  color: #2f6bed;

  background:
    rgba(47, 107, 237, .07);
}


.foxaka-mobile-skills-list a span {
  color: #c8781f;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: .05em;
}


.foxaka-mobile-skill-all {
  display: block !important;

  margin-bottom: 4px;

  color: #2f6bed !important;

  background:
    rgba(47, 107, 237, .08);
}


.foxaka-mobile-cta {
  margin-top: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 14px 18px;

  border-radius: 100px;

  background: #2f6bed;

  color: #fff;

  font-family:
    'Manrope',
    sans-serif;

  font-size: 14px;

  font-weight: 800;

  text-decoration: none;
}


.foxaka-mobile-cta:hover {
  color: #fff;

  background: #285fd8;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1220px) {

  .foxaka-nav-link {
    padding-left: 10px;

    padding-right: 10px;

    font-size: 12.5px;
  }


  .foxaka-header-cta {
    padding-left: 16px;

    padding-right: 16px;

    font-size: 13px;
  }

}


@media (max-width: 1060px) {

  .foxaka-header-nav,
  .foxaka-header-cta {
    display: none;
  }


  .foxaka-mobile-menu {
    display: block;
  }

}


@media (max-width: 560px) {

  .foxaka-mobile-panel {
    top: 72px;
  }

}