/* Base compartida de las propuestas de portada (index2 a index5) */
.propuesta {
    background: var(--crema-reina);
    color: var(--negro-reina);
    overflow-x: clip; /* clip keeps sticky; hidden forces overflow-y:auto and kills .p8-track_pin */
}

.propuesta img {
    max-width: 100%;
}

.propuesta a:focus-visible,
.propuesta button:focus-visible,
.propuesta summary:focus-visible,
.propuesta input:focus-visible {
    outline: 3px solid var(--naranja-mango);
    outline-offset: 3px;
}

.p-marquee {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}

.p-marquee_pista {
    display: flex;
    flex-shrink: 0;
    gap: 2.5rem;
    padding-right: 2.5rem;
}

.p-subir {
    align-items: center;
    background: var(--negro-reina);
    border: 2px solid var(--crema-reina);
    border-radius: 999px;
    bottom: 96px;
    color: var(--crema-reina);
    display: flex;
    height: 48px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 20px;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: 48px;
    z-index: 60;
}

.p-subir.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.p-letras span {
    display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
    .p-marquee_pista {
        animation: p-marquee 22s linear infinite;
    }

    .p-marquee-inversa .p-marquee_pista {
        animation-direction: reverse;
    }

    .p-marquee:hover .p-marquee_pista {
        animation-play-state: paused;
    }

    html.p-motion [data-p-revelar] {
        opacity: 0;
        transform: translateY(48px);
        transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: calc(var(--p-i, 0) * 90ms);
    }

    html.p-motion [data-p-revelar].is-visible {
        opacity: 1;
        transform: none;
    }

    html.p-motion .p-letras span {
        animation: p-letra 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        animation-delay: calc(var(--p-i, 0) * 35ms);
    }
}

@keyframes p-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes p-letra {
    from {
        opacity: 0;
        transform: translateY(80%) rotate(12deg) scale(0.6);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .propuesta *,
    .propuesta *::before,
    .propuesta *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
/* El header comparte tinta oscura sobre crema aunque la propuesta pinte el body con otro color de texto */
.propuesta .announcement-bar {
    background: var(--rojo-tomate);
    color: #ffffff;
}

.propuesta .site-header {
    background: var(--crema-reina);
    color: var(--negro-reina);
}

.propuesta .site-header a,
.propuesta .site-header button,
.propuesta .site-header summary {
    color: var(--negro-reina);
}

.propuesta .site-header nav a:hover,
.propuesta .site-header nav a:focus-visible,
.propuesta .site-header nav a[aria-current="page"] {
    color: var(--rojo-chamoy);
    opacity: 1;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.propuesta article[class*="-producto"] .tienda-agregar-form .btn-pill { padding: 8px 24px; }