/* =================================================================== Chispita · Dual-Image Scroll Parallax System styles-scroll.css — Version 2.0 Añadir en después de styles.css =================================================================== */ /* ── Product Card Image Wrap (reemplaza product-video-wrap) ─────────── */ .product-img-wrap { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-lg, 20px); overflow: hidden; margin-bottom: var(--space-5, 1.25rem); background: var(--gradient-cream, linear-gradient(135deg, #FFF8F0, #FCE0E8)); box-shadow: rgba(232, 150, 60, 0.18) 0px 8px 32px; cursor: pointer; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease; } .product-img-wrap:hover { box-shadow: rgba(232, 150, 60, 0.30) 0px 16px 48px; } .product-img-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; } .product-img-wrap .img-front { opacity: 1; transform: scale(1); z-index: 2; } .product-img-wrap .img-detail { opacity: 0; transform: scale(1.07); z-index: 1; } /* Hover sutil: zoom suave de la imagen (sin crossfade fake) */ @media (hover: hover) { .product-img-wrap:hover .img-front { transform: scale(1.05); } } /* Orbit dashed ring */ .product-img-wrap .img-orbit { position: absolute; inset: -8%; border: 1.5px dashed rgba(195, 135, 60, 0.20); border-radius: 50%; animation: chispita-spin 20s linear infinite; pointer-events: none; z-index: 3; transition: opacity 0.4s; } .product-img-wrap:hover .img-orbit, .product-img-wrap.is-detail .img-orbit { border-color: rgba(195, 135, 60, 0.40); } @keyframes chispita-spin { to { transform: rotate(360deg); } } /* Dot indicators */ .product-img-wrap .img-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 4; } .product-img-wrap .img-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(4px); transition: background 0.35s, transform 0.35s; } .product-img-wrap .img-dot.active, .product-img-wrap:hover .img-dot:last-child, .product-img-wrap.is-detail .img-dot:last-child { background: rgba(255, 255, 255, 0.95); transform: scale(1.5); } .product-img-wrap:hover .img-dot:first-child, .product-img-wrap.is-detail .img-dot:first-child { background: rgba(255, 255, 255, 0.25); transform: scale(1); } /* Emoji placeholder while images load */ .product-img-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--gradient-cream, linear-gradient(135deg, #FFF8F0 0%, #FDE8D4 50%, #FCE0E8 100%)); z-index: 5; transition: opacity 0.5s ease; pointer-events: none; } .product-img-placeholder.hidden { opacity: 0; pointer-events: none; } .product-img-placeholder .dessert-icon { font-size: 3.2rem; line-height: 1; filter: drop-shadow(0 6px 16px rgba(180, 100, 40, 0.20)); animation: chispita-float 3.2s ease-in-out infinite; } @keyframes chispita-float { 0%, 100% { transform: translateY(0px) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } } .product-img-placeholder .dessert-name { font-family: var(--font-display, 'Fraunces', serif); font-size: 0.8rem; color: var(--text-secondary, #8B6340); letter-spacing: 0.08em; opacity: 0.65; text-align: center; } /* ── Hero Showcase (sección central de rotación) ────────────────────── */ .hero-showcase { padding: 5rem 0; background: linear-gradient(150deg, #FFF8F0 0%, #FDE8D4 45%, #FCE0E8 100%); overflow: hidden; } .hero-showcase__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; max-width: 1100px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); align-items: center; } .hero-showcase__img-col { position: relative; display: flex; align-items: center; justify-content: center; } .hero-showcase__frame { position: relative; width: min(440px, 90%); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 8px rgba(92,40,10,0.06), 0 12px 40px rgba(92,40,10,0.10), 0 40px 100px rgba(92,40,10,0.12); background: linear-gradient(135deg, #FFF8F0, #FCE0E8); } .hero-showcase__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .hero-showcase__frame .img-front { opacity: 1; transform: scale(1); z-index: 2; } .hero-showcase__frame .img-detail { opacity: 0; transform: scale(1.08); z-index: 1; } .hero-showcase__frame.is-detail .img-front { opacity: 0; transform: scale(0.94); } .hero-showcase__frame.is-detail .img-detail { opacity: 1; transform: scale(1); } .hero-showcase__orbit-1, .hero-showcase__orbit-2 { position: absolute; border-radius: 50%; pointer-events: none; } .hero-showcase__orbit-1 { inset: -10%; border: 1.5px dashed rgba(195, 135, 60, 0.22); animation: chispita-spin 25s linear infinite; } .hero-showcase__orbit-2 { inset: -22%; border: 1px dotted rgba(220, 130, 110, 0.13); animation: chispita-spin 40s linear infinite reverse; } .hero-showcase__text-col { display: flex; flex-direction: column; gap: 1.5rem; } .hero-showcase__eyebrow { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: #C38730; font-weight: 700; } .hero-showcase__title { font-family: var(--font-display, 'Fraunces', serif); font-size: clamp(1.9rem, 3.5vw, 3rem); line-height: 1.12; color: #3C1F0A; } .hero-showcase__desc { font-size: 1rem; color: #6B4020; opacity: 0.78; line-height: 1.72; max-width: 38ch; } .hero-showcase__price { font-family: var(--font-display, 'Fraunces', serif); font-size: 1.35rem; color: #C38730; } .hero-showcase__cta { display: inline-flex; align-items: center; gap: 0.5rem; background: #3C1F0A; color: #FFF8F0; padding: 0.85rem 1.75rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; text-decoration: none; width: fit-content; transition: background 0.25s, transform 0.25s; letter-spacing: 0.02em; } .hero-showcase__cta:hover { background: #C38730; transform: translateY(-2px); } .hero-showcase__switcher { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; } .hero-showcase__switch-btn { padding: 0.45rem 1.1rem; border-radius: 999px; border: 1.5px solid rgba(195, 135, 60, 0.32); background: transparent; color: #6B4020; font-size: 0.82rem; cursor: pointer; transition: all 0.22s; font-family: var(--font-body, inherit); } .hero-showcase__switch-btn.active, .hero-showcase__switch-btn:hover { background: #C38730; border-color: #C38730; color: white; } @media (max-width: 768px) { .hero-showcase__inner { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 2rem; } .hero-showcase__img-col { order: -1; } .hero-showcase__frame { width: min(300px, 82vw); aspect-ratio: 1 / 1; } .hero-showcase__title { font-size: clamp(1.7rem, 5vw, 2.2rem); } .hero-showcase__desc { max-width: 100%; } }