@view-transition {
  navigation: auto;
}

/* --- ESTILO BASE DEL HEADER --- */
.apple-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 52px; /* Un pelín más alto para que respire */

    /* Fondo un poco más oscuro para mayor contraste con las letras */
    background-color: rgba(15, 15, 15, 0.85); 
    
    /* Efecto Blur estilo Apple */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Línea un poco más visible */
    transition: background-color 0.3s ease;
}

/* --- CONTENEDOR INTERNO --- */
.header-container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 22px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- NAVEGACIÓN --- */
.apple-nav {
    width: 100%;
}

.apple-nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* --- ESTILO DE LAS LETRAS (LINKS) --- */
.apple-nav ul li a {
    color: #ffffff; /* Blanco Puro para máximo brillo */
    font-size: 13px; /* Un punto más grande para mejor lectura */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500; /* Un poco más gruesas (antes eran 400) */
    text-decoration: none;
    padding: 0 12px;
    opacity: 1; /* Sin transparencia, totalmente visibles */
    transition: all 0.3s ease;
    white-space: nowrap;
    
    /* Sutil sombra de texto para que resalte sobre cualquier fondo */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px; /* Un poco de espacio entre letras estilo premium */
}

/* Efecto Hover (al pasar el mouse) */
.apple-nav ul li a:hover {
    color: #ff9000; /* Azul estilo Apple clásico al pasar el mouse (o déjalo blanco si prefieres) */
    text-shadow: 0 0 8px #ff9000; /* Pequeño resplandor */
    transform: scale(1.05); /* Efecto leve de aumento */
}

/* --- IMÁGENES Y LOGO --- */
.nav-icon {
    display: block;
    height: auto;
}

/* --- LOGO MÁS VIVO --- */
.apple-logo {
    max-height: 110px; /* Tamaño ajustado */
    width: auto;
    
    /* TRUCO: Aumenta el brillo y contraste de la imagen PNG */
    filter: brightness(1.2) drop-shadow(0 2px 4px rgba(255,255,255,0.2)); 
    
    transition: transform 0.3s ease, filter 0.3s ease;
}

.apple-logo:hover {
    transform: scale(1.1); /* Crece un poco al pasar el mouse */
    filter: brightness(1.4) drop-shadow(0 0 8px rgba(255,255,255,0.6)); /* Resplandece */
}

/* Evitar scroll horizontal */
body {
    overflow-x: hidden;
}

@media screen and (max-width: 768px) {
    /* 1. Hacemos que el contenedor del menú sea deslizable */
    .header-container {
        justify-content: flex-start; /* Alinea contenido al inicio */
        overflow-x: auto; /* Permite deslizar horizontalmente */
        padding-left: 0; 
        padding-right: 0;
        -webkit-overflow-scrolling: touch; /* Deslizamiento suave en iPhone */
    }
    
    /* 2. Ajustamos la lista para que no se apriete */
    .apple-nav ul {
        width: max-content; /* El ancho será lo que ocupen los textos */
        padding: 0 10px;    /* Un poco de espacio a los lados */
    }

    .apple-nav ul li a {
        padding: 0 15px;    /* Espacio cómodo para tocar con el dedo */
        font-size: 14px;
    }

    /* 3. Reducimos el logo en celular porque 110px es muy grande para la barra */
    .apple-logo {
        max-height: 35px; /* Ajuste para que quepa en la barra de 52px */
        margin-top: 5px;
    }

    /* Ocultar la barra de scroll gris fea (pero sigue funcionando el deslizamiento) */
    .header-container::-webkit-scrollbar {
        display: none;
    }
}