/**
 * ============================================================================
 * CAFETERÍA PREMIUM - Hero de portada (nivel agencia)
 * ============================================================================
 */

.hero--premium {
    height: 100vh;
    height: 100dvh; /* altura real en móviles (sin saltos con la barra) */
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    position: relative;
}

/* Video con tratamiento cinematográfico cálido */
.hero--premium .hero__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
    filter: saturate(0.75) contrast(1.06) brightness(0.7);
    transform: scale(1.06);
}

/* Overlay editorial multicapa */
.hero--premium .hero__overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(120% 80% at 50% 30%, transparent 0%, rgba(15,15,26,0.55) 70%, rgba(15,15,26,0.9) 100%),
        linear-gradient(180deg, rgba(15,15,26,0.55) 0%, rgba(15,15,26,0.25) 40%, rgba(15,15,26,0.95) 100%);
}

/* Grano de película sutil */
.hero__grain {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero--premium .hero__content {
    position: relative; z-index: 3;
    max-width: 900px; padding: 0 1.5rem;
}
/* Anular opacity:0 heredado del hero clásico (las palabras se animan solas) */
.hero--premium .hero__title { opacity: 1; }

/* Kicker con líneas decorativas */
.hero__kicker {
    display: inline-flex; align-items: center; gap: 1rem;
    font-family: var(--font-accent);
    font-size: clamp(0.8rem, 1.6vw, 1.05rem);
    letter-spacing: 3px; text-transform: uppercase;
    color: var(--color-primary); margin-bottom: 1.5rem;
    opacity: 0; animation: heroFade 0.9s ease 0.3s forwards;
}
.hero__kicker-line { width: 40px; height: 1px; background: var(--color-primary); opacity: 0.5; }

/* Título grande con reveal por palabra */
.hero__title--xl {
    font-size: clamp(2.8rem, 9vw, 6.5rem);
    line-height: 1.02; color: #fff; margin-bottom: 1.5rem;
    font-weight: 800; letter-spacing: -1px;
}
.hero__word {
    display: inline-block;
    opacity: 0; transform: translateY(40px);
    animation: heroWord 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
}
.hero__word:nth-child(1){ animation-delay:.45s }
.hero__word:nth-child(2){ animation-delay:.55s }
.hero__word:nth-child(3){ animation-delay:.65s }
.hero__word:nth-child(4){ animation-delay:.75s }
.hero__title--xl .gradient-text { animation-delay:.9s }
@keyframes heroWord { to { opacity:1; transform:translateY(0); } }
@keyframes heroFade { to { opacity:1; } }

.hero--premium .hero__description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255,255,255,0.82); max-width: 560px; margin: 0 auto 2.2rem;
    opacity: 0; animation: heroFade 0.9s ease 1.1s forwards;
}
.hero--premium .hero__buttons {
    display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
    opacity: 0; animation: heroFade 0.9s ease 1.3s forwards;
}

/* Barra inferior con datos de confianza */
.hero__bar {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
    display: flex; justify-content: center; gap: clamp(1.5rem, 6vw, 5rem);
    padding: 1.3rem 1.5rem 1.5rem;
    background: linear-gradient(180deg, transparent, rgba(15,15,26,0.6));
    backdrop-filter: blur(4px);
    opacity: 0; animation: heroFade 1s ease 1.6s forwards;
}
.hero__bar-item { display: flex; flex-direction: column; text-align: center; }
.hero__bar-item strong { color: var(--color-primary); font-family: var(--font-primary); font-size: 1.05rem; }
.hero__bar-item span { color: rgba(255,255,255,0.6); font-size: 0.72rem; }

/* Scroll cue */
.hero--premium .hero__scroll {
    position: absolute; bottom: 5.5rem; left: 50%; transform: translateX(-50%); z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    color: rgba(255,255,255,0.7); font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase;
    text-decoration: none;
    opacity: 0; animation: heroFade 1s ease 1.9s forwards;
}
.hero--premium .hero__scroll-line { width: 1px; height: 36px; background: linear-gradient(var(--color-primary), transparent); animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { 0%,100%{ transform:scaleY(0.5); opacity:0.5; } 50%{ transform:scaleY(1); opacity:1; } }

/* ─── Móvil ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero--premium { min-height: 560px; }
    .hero__kicker { gap: 0.6rem; letter-spacing: 2px; }
    .hero__kicker-line { width: 22px; }
    .hero--premium .hero__buttons { flex-direction: column; width: 100%; max-width: 320px; margin-left:auto; margin-right:auto; }
    .hero--premium .hero__buttons .btn { width: 100%; }
    .hero__bar { gap: 1.2rem; padding: 1rem 1rem 1.2rem; }
    .hero__bar-item strong { font-size: 0.9rem; }
    .hero__bar-item span { font-size: 0.65rem; }
    .hero--premium .hero__scroll { bottom: 6.5rem; }
}
@media (max-width: 420px) {
    .hero__bar-item:nth-child(2) { display: none; } /* dejar 2 datos en pantallas chicas */
}