/* ============================================================
   1. CABECERA FIJA Y PEGADA (MÓVIL Y DESKTOP)
   ============================================================ */
header, .wp-custom-header, .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important; /* Asegura que esté por encima de todo */
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    margin: 0 !important; /* Elimina márgenes que puedan separarla del borde */
}

/* 2. AJUSTE PARA EL CUERPO DE LA WEB (Para que el contenido no se tape) */
body {
     /* Ajusta este número según la altura de tu menú */
    margin-top: 0 !important;
}

/* Ajuste específico para móviles */
@media screen and (max-width: 600px) {
    body {
         /* Menos espacio en móvil */
    }
}

/* 3. COMPATIBILIDAD CON LA BARRA DE ADMIN DE WORDPRESS */
/* Si estás logueado, baja la cabecera para que la barra negra no la tape */
.admin-bar header, .admin-bar .wp-custom-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar header, .admin-bar .wp-custom-header {
        top: 46px !important;
    }
}

/* ============================================================
   4. LETRAS NEGRAS INTENSAS (MÁXIMA LEGIBILIDAD)
   ============================================================ */
/* Forzamos el color negro puro (#000) y grosor máximo en textos clave */
header span, 
header p, 
header a, 
header div,
.social-bar span,
.welcome-banner p {
    color: #000000 !important;
    font-weight: 800 !important; /* Letra muy negra y gruesa */
    opacity: 1 !important;
    -webkit-font-smoothing: antialiased;
}

/* El menú negro mantiene sus letras blancas para que se lean bien */
nav.main-navigation a, 
header nav a {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: 0px 0px 1px rgba(255,255,255,0.2);
}

/* Enlaces del menú al pasar el ratón */
nav.main-navigation a:hover {
    color: #ec4899 !important; /* Rosa fuerte al pasar el ratón */
}

/* ============================================================
   5. OPTIMIZACIÓN PARA MÓVIL (SIN SCROLL LATERAL)
   ============================================================ */
html, body {
    overflow-x: hidden; /* Evita que la web se mueva hacia los lados */
    width: 100%;
}

/* Menú deslizable con el dedo en móvil */
.no-scrollbar {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.wpcom-ai-sticky-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}
/* Cabecera fija - Vella Perfumeria */
.wp-block-post-content > .wp-block-group:first-child,
.wp-block-post-content > div > .wp-block-group:first-child,
.entry-content > .wp-block-group:first-child,
.has-global-padding > .wp-block-group:first-child {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}
sticky-header nav a,
.sticky-header .wp-block-navigation a,
header .wp-block-navigation a,
header nav a {
    color: #000000 !important;
}