@font-face {
      font-family: 'Kaushan Script';
      src: url('./fonts/kaushan-script.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    body {
      margin: 0;
      background: #f3f9eb;
      padding-top: 56px; /* espacio para el menú fijo */
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /* ===== MENÚ FIJO CON OFFSET ===== */
    .navbar {
      background-color: #3EA73E !important;
      min-height: 56px;
    }

    /* Ajuste para que el menú empiece en la segunda columna */
    @media (min-width: 768px) {
      .navbar .container-fluid {
        display: flex;
        flex-wrap: wrap;
      }
      
      .navbar-brand {
        width: 8.3333%; /* 1 columna */
        margin-right: 0;
      }
      
      .navbar-collapse {
        width: 91.6667%; /* 11 columnas */
        padding-left: 0;
      }
    }

    /* Items del menú más juntos */
    .navbar-nav {
      gap: 0.1rem !important;
    }
    
    .navbar-nav .nav-item {
      margin: 0;
    }

    /* Enlaces más compactos */
    .navbar-nav .nav-link {
      transition: all 0.3s ease;
      color: rgba(255, 255, 255, 0.85) !important;
      padding: 0.5rem 0.75rem !important;
    }

    .navbar-nav .nav-link:hover {
      background-color: #026647;
      color: #fff !important;
      border-radius: 4px;
    }

    .navbar-nav .nav-item.active .nav-link {
      background-color: #026647;
      color: white !important;
      border-radius: 4px;
    }

    /* ===== HEADER DESKTOP ===== */
    .header-desktop {
      height: 174px;
      background: #9ecde9 url('./header_background.webp') repeat-x top;
      display: flex;
      overflow: hidden;
      position: relative;
    }

    .header-desktop .left {
      width: 316px;
      height: 174px;
      background: url('./header_left.webp') no-repeat left top;
      background-size: contain;
      flex-shrink: 0;
    }

    .header-desktop .right {
      flex: 1;
      height: 174px;
      background: url('./header_right.webp') no-repeat right top;
      background-size: contain;
    }

    .header-desktop h1,
    .header-desktop h2 {
      position: absolute;
      font-family: 'Kaushan Script', cursive;
      margin: 0;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .header-desktop h1 {
      top: 76px;
      left: 25px;
      color: #ffffff;
      font-size: 36px;
      text-shadow: 0 0 8px #426B9A;
    }

    .header-desktop h2 {
      top: 125px;
      left: 141px;
      color: #033C73;
      font-size: 18px;
    }

    /* ===== HEADER MÓVIL ===== */
    .header-mobile {
      display: none;
      background: #9ecde9;
      height: 80px;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
    }

    .header-mobile h1,
    .header-mobile h2 {
      font-family: 'Kaushan Script', cursive;
      margin: 0;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .header-mobile h1 {
      font-size: 20px;
      color: #ffff88;
      text-shadow: 0 0 6px #426B9A;
    }

    .header-mobile h2 {
      font-size: 14px;
      color: #033C73;
    }

    /* ===== FOOTER ===== */
    .page-footer {
      background-color: #C8E6C9;
      min-height: 151px;
      margin-top: auto;
    }
    
    .footer-brand-area {
      background-color: #4578AD;
      min-height: 30px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 1rem;
    }
    
    .footer-copy {
      font-family: 'Kaushan Script';
      font-size: 12px;
      color: white;
    }
    
    .text-link-stable {
      color: #2c3e50 !important;
    }
    
    .text-link-stable:hover {
      color: #1a252f !important;
      text-decoration: underline !important;
    }

    /* ===== MEDIA QUERIES ===== */
    @media (max-width: 767.98px) {
      .header-desktop {
        display: none;
      }
      .header-mobile {
        display: flex;
      }
      
      /* Menú móvil más compacto */
      .navbar-nav {
        padding: 0.5rem 0;
      }
      
      .navbar-nav .nav-link {
        padding: 0.5rem 1rem !important;
      }
      
      /* Reset para móvil */
      .navbar-brand {
        width: auto;
      }
      .navbar-collapse {
        width: 100%;
      }
      
      /* Footer en móvil */
      .footer-brand-area {
        justify-content: center;
        padding-right: 0;
      }
    }

    @media (min-width: 768px) {
      .header-mobile {
        display: none;
      }
      .header-desktop {
        display: flex;
      }
    }

/* =====================================================
   FIX overflow horizontal Webcampista en XenForo
   ===================================================== */

.wc-bs5 {
  overflow-x: clip;
  max-width: 100%;
}

/* =====================================================
   XenForo Share Buttons – FIX total (Webcampista)
   ===================================================== */

/* contenedor de botones */
.shareButtons-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .5rem !important;
}

/* cada botón */
.shareButtons-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 36px !important;
  height: 36px !important;

  padding: 0 !important;
  margin: 0 !important;

  background: rgba(255,255,255,.6) !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  border-radius: 6px !important;

  color: #2c3e50 !important;
  text-decoration: none !important;
}

/* oculta texto (solo iconos) */
.shareButtons-button span {
  display: none !important;
}

/* iconos SVG internos */
.shareButtons-button svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
  display: block !important;
}

/* iconos FontAwesome XF wrapper */
.shareButtons-button .fa--xf {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* hover */
.shareButtons-button:hover {
  color: #026647 !important;
  background: #ffffff !important;
}



/* FIX Share buttons XenForo */
.shareButtons--iconic .shareButtons-button i,
.shareButtons--iconic .shareButtons-button svg {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: currentColor !important;
  fill: currentColor !important;
}

/* =====================================================
   XF SHARE BUTTONS – FIX DEFINITIVO (Webcampista)
   ===================================================== */

/* Reactiva el wrapper FA de XenForo */
.shareButtons--iconic .shareButtons-button i.fa--xf {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Reactiva el SVG interno */
.shareButtons--iconic .shareButtons-button i.fa--xf svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Color normal */
.shareButtons--iconic .shareButtons-button {
  color: #2c3e50 !important;
}

/* Hover */
.shareButtons--iconic .shareButtons-button:hover {
  color: #026647 !important;
}


/* =====================================================
   XF SVG <use> FIX – CRÍTICO
   ===================================================== */

.shareButtons-button svg {
  overflow: visible !important;
}

.shareButtons-button svg use {
  overflow: visible !important;
}

/* Ajuste del wrapper FA */
.shareButtons-button i.fa--xf {
  line-height: 1 !important;
}

/* =====================================================
   FIX REAL XF SVG ICONS (font-size bug)
   ===================================================== */

.shareButtons--iconic .shareButtons-button i.fa--xf {
  font-size: 18px !important;   /* CLAVE */
  line-height: 1 !important;
}

.shareButtons--iconic .shareButtons-button i.fa--xf svg {
  width: 1em !important;
  height: 1em !important;
}

/* =====================================================
   FIX REAL – eliminar limitación SVG share buttons
   ===================================================== */

.shareButtons--iconic .shareButtons-button svg {
  max-width: none !important;
  width: 18px !important;
  height: 18px !important;
}