/* =====================================================
   UOPI Landing — CSS residual (solo lo que Tailwind
   no puede expresar: keyframes, pseudo-elementos, JS)
   ===================================================== */

/* ── Scroll reveal (clase toggled por JS) ── */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.in  { opacity: 1; transform: none; }
.reveal-d1  { transition-delay: 80ms; }
.reveal-d2  { transition-delay: 160ms; }
.reveal-d3  { transition-delay: 240ms; }
.reveal-d4  { transition-delay: 320ms; }

/* ── Nav: transparente → frosted al hacer scroll ── */
#main-nav {
    transition: background 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color 320ms,
                backdrop-filter 320ms,
                padding 320ms;
}
#main-nav.scrolled {
    background: rgba(251, 248, 241, 0.92) !important;
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom-color: #e3decd !important;
}
#main-nav.scrolled .nav-logo-img { height: 36px !important; }

/* ── Nav link: subrayado animado (pseudo-elemento) ── */
.nav-link-anim { position: relative; }
.nav-link-anim::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    height: 1.5px; width: 0;
    background: #a2893b;
    transition: width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-link-anim:hover::after { width: 100%; }

/* ── Pulse dot (hero eyebrow) ── */
@keyframes uopi-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(162, 137, 59, .18); }
    50%       { box-shadow: 0 0 0 8px rgba(162, 137, 59, .04); }
}
.dot-pulse { animation: uopi-pulse 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; }

/* ── Dropdown menú animación ── */
@keyframes menuIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
.nav-dropdown-menu { animation: menuIn 220ms cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ── Medios: marquee track ── */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.medios-track { animation: marquee 28s linear infinite; }
.medios-track:hover { animation-play-state: paused; }

/* ── Progress bar ── */
.nav-progress {
    background: linear-gradient(90deg, #455530, #a2893b);
    transition: width 120ms linear;
}

/* ── Nav scrolled: inner padding y logo compactos ── */
#main-nav.scrolled #nav-inner {
    padding-top: 10px;
    padding-bottom: 10px;
}
#main-nav.scrolled #nav-logo-img {
    height: 36px;
}

/* ── Hero: rayos decorativos (gradiente cónico complejo) ── */
.hero-rays {
    top: -20%; right: -10%; width: 70%; height: 120%;
    position: absolute;
    background:
        radial-gradient(closest-side, rgba(196,159,77,.18), transparent 70%),
        conic-gradient(from 200deg at 50% 50%,
            transparent 0deg,
            rgba(196,159,77,.08) 60deg,
            transparent 120deg,
            rgba(108,140,74,.10) 200deg,
            transparent 280deg);
    filter: blur(6px);
}

/* ── Hero strip: fade en los bordes ── */
.hero-strip-track {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* ── Elige tu olivo: carousel ── */
.olivos-wrap {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.olivos-track {
    display: flex;
    gap: 20px;
    padding: 8px 40px 16px;
    overflow-x: scroll;
    scroll-behavior: auto;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.olivos-track::-webkit-scrollbar { display: none; }
.olivos-track.is-dragging { cursor: grabbing; }
.olivos-track.is-dragging .olivo-card { pointer-events: none; }


/* ── Productos: ribbon ── */
.productos-ribbon-track {
    animation: marquee 28s linear infinite;
    will-change: transform;
}
.productos-ribbon:hover .productos-ribbon-track {
    animation-play-state: paused;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Sello postal giratorio ── */
@keyframes stampSpin {
    from { transform: rotate(-8deg); }
    to   { transform: rotate(352deg); }
}
.postal-stamp-spin {
    animation: stampSpin 18s linear infinite;
}

/* ── Transparencia: tabs ── */
.trans-tab.active-tab {
    color: #455530;
    background: #fff;
    border-bottom-color: #a2893b !important;
}

/* ── Apadrinamiento paso 2 ── */
.paso2-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 1024px) {
    .paso2-grid {
        grid-template-columns: 1fr 320px;
        gap: 24px;
    }
}

.paso2-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e3decd;
    padding: 20px;
    margin-bottom: 14px;
}

.campos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 480px) {
    .campos-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Dashboard: modal animation ── */
@keyframes modalIn {
    from { opacity: 0; transform: scale(.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-animate { animation: modalIn 220ms cubic-bezier(0.22, 0.61, 0.36, 1); }