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

/* HEADER COMPARTIDO: entrada suave y versión compacta al desplazarse. */
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', sans-serif; background: #fff; }

.header {
    position: sticky;
    top: 0;
    z-index: 999;
    width: 100%;
    padding: 22px 40px;
    border-bottom: 1px solid rgba(18, 41, 73, .08);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px);
    transition: padding .28s ease, box-shadow .28s ease, background-color .28s ease;
    animation: header-entrada .65s ease-out both;
}

.header--compacto {
    padding-top: 12px;
    padding-bottom: 12px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 8px 24px rgba(18, 41, 73, .09);
}

.header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: min(1400px, 100%);
    margin: 0 auto;
}

.header__brand { flex: 0 0 auto; animation: header-entrada .55s .06s ease-out both; }
.header__logo { display: block; position: relative; overflow: hidden; }
.header__logo img { display: block; width: 150px; transition: transform .3s ease; }
.header__logo:hover img { transform: scale(1.03); }
.header__logo::after { position: absolute; top: 0; bottom: 0; left: -42%; width: 30%; content: ''; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); transform: skewX(-20deg); transition: left .55s ease; }
.header__logo:hover::after { left: 120%; }

.header__content { display: flex; align-items: center; justify-content: flex-end; gap: clamp(20px, 3vw, 52px); min-width: 0; }
.header__nav { min-width: 0; }
.header__menu { display: flex; align-items: center; gap: clamp(17px, 2.3vw, 38px); margin: 0; padding: 0; list-style: none; }
.header__item { list-style: none; animation: header-entrada .45s ease-out both; }
.header__item:nth-child(1) { animation-delay: .12s; }.header__item:nth-child(2) { animation-delay: .18s; }.header__item:nth-child(3) { animation-delay: .24s; }.header__item:nth-child(4) { animation-delay: .30s; }.header__item:nth-child(5) { animation-delay: .36s; }
.header__link { position: relative; color: #1c2d45; font-size: .96rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color .2s ease; }
.header__link:hover, .header__link:focus-visible { color: #0a58ff; }
.header__link::after { position: absolute; bottom: -8px; left: 0; width: 0; height: 2px; content: ''; background: #0a58ff; transition: width .22s ease; }
.header__link:hover::after, .header__link:focus-visible::after { width: 100%; }
.header__button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 44px; padding: 11px 18px; border-radius: 10px; background: #0a58ff; box-shadow: 0 8px 18px rgba(10, 88, 255, .18); color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease; animation: header-entrada .5s .44s ease-out both; }
.header__button:hover, .header__button:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(10, 88, 255, .25); }

@keyframes header-entrada { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* MÓVIL: el menú permanece horizontal y desplazable; nunca forma una columna alta. */
@media (max-width: 860px) {
    .header { padding: 14px 16px; }
    .header__container { position: relative; flex-wrap: wrap; gap: 10px 16px; }
    .header__logo img { width: 118px; }
    .header__content { display: block; flex: 1 1 100%; order: 2; }
    .header__nav { width: 100%; overflow-x: auto; scrollbar-width: none; }
    .header__nav::-webkit-scrollbar { display: none; }
    .header__menu { width: max-content; gap: 19px; padding: 5px 2px 8px; }
    .header__link { font-size: .84rem; }
    .header__button { position: absolute; top: 0; right: 0; min-height: 39px; padding: 9px 12px; font-size: .78rem; white-space: nowrap; }
    .header--compacto { padding-top: 9px; padding-bottom: 9px; }
}

@media (max-width: 430px) {
    .header__menu { gap: 17px; }
}

@media (prefers-reduced-motion: reduce) { .header, .header *, .header *::after { animation: none !important; transition: none !important; } }