@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --nav-bg:#000;
  --nav-fg:#fff;
  --nav-muted:rgba(255,255,255,.75);
  --nav-muted-2:rgba(255,255,255,.55);
  /* Use a dark background for the brand so the full‑width logo blends seamlessly */
  --brand-bg:#000;
  /* Increase the header height to better showcase the full‑width logo */
  /* Increase desktop brand height for a bolder logo */
  --brand-h-desktop:320px;
  --nav-h-desktop:66px;
  --brand-h-mobile:200px;
  --bottom-h-mobile:78px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:16px;
  /* Use Inter as the default UI font for a refined look */
  --font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/*
  Barra superior (logo) + menú desktop (barra negra) + menú móvil inferior.
  Diseñado para integrarse sobre páginas existentes sin romper el layout.
*/

body{
  /* Force the global font across pages, even when inline styles set their own font */
  font-family:var(--font) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Logo superior (siempre visible) */
.xcorp-brand{
  /* Make the brand part of the normal document flow so it scrolls away */
  position:relative;
  /* occupy full width */
  width:100%;
  /* The height is defined by the custom properties above */
  height:var(--brand-h-mobile);
  background:var(--brand-bg);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Subtle separation line below the header */
  border-bottom:1px solid rgba(255,255,255,.08);
}

.xcorp-brand a{ display:flex; align-items:center; justify-content:center; height:100%; }

/* The logo image fills the header and scales to cover it, showing the full‑width design */
.xcorp-brand img{
  display:block;
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
}

/* Menú desktop */
.xcorp-topnav{ display:none; }

/* Menú móvil inferior */
.xcorp-bottomnav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,.92);
  backdrop-filter: blur(10px);
  /* Lighter border on mobile menu */
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding:10px 8px 12px;
  z-index:10000;
}

.xcorp-bottomnav a{
  flex:1;
  text-align:center;
  color:var(--nav-muted);
  text-decoration:none;
  /* Slightly smaller font and tighter spacing for a refined mobile nav */
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.1;
  padding:4px 2px;
}

.xcorp-bottomnav svg{
  width:30px;
  height:30px;
  display:block;
  margin:0 auto 6px;
  fill:none;
  stroke:var(--nav-muted);
  /* Use thinner strokes on icons for a more refined feel */
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.xcorp-bottomnav a.is-active{ color:var(--nav-fg); }
.xcorp-bottomnav a.is-active svg{ stroke:var(--nav-fg); }

.xcorp-bottomnav a:focus-visible,
.xcorp-topnav a:focus-visible{
  outline:2px solid rgba(255,255,255,.8);
  outline-offset:3px;
}

/* Padding para no tapar contenido */
body{
  /* Without a fixed header we don't need top padding; leave room only for the bottom nav on mobile */
  padding-top:0 !important;
  padding-bottom:var(--bottom-h-mobile) !important;
}

@media (min-width: 900px){
  .xcorp-brand{
    height:var(--brand-h-desktop);
    /* Subtler border color on dark backgrounds */
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  /* The image continues to fill the header in desktop view */
  .xcorp-brand img{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:cover;
  }

  .xcorp-topnav{
    /* Use sticky positioning so the menu stays at the top once it reaches it */
    position:sticky;
    top:0;
    left:0;
    right:0;
    height:66px;
    background:rgba(0,0,0,.92);
    backdrop-filter: blur(10px);
    /* Lighter border on the desktop menu */
    border-bottom:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    /* Increase spacing between menu items */
    gap:96px;
    z-index:9999;
  }

  .xcorp-topnav a{
    color:var(--nav-muted);
    text-decoration:none;
    /* Slightly smaller size and weight for a more delicate appearance */
    font-size:16px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.1em;
    padding:10px 0;
    position:relative;
  }

  .xcorp-topnav a:hover{ color:var(--nav-fg); }

  .xcorp-topnav a.is-active{ color:var(--nav-fg); }

  .xcorp-topnav a.is-active::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-6px;
    height:2px;
    background:var(--nav-fg);
    opacity:.95;
  }

  .xcorp-bottomnav{ display:none; }

  body{
    /* In desktop view remove extra padding; header and nav are part of the normal flow */
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
}

/* Ajustes de seguridad para páginas con fondo negro */
body[data-page-theme="dark"] .xcorp-brand{ box-shadow:0 10px 25px rgba(0,0,0,.08); }