/* Reveal-on-scroll: reemplaza el runtime de Instant (que no cargamos). - Sin JS: NO recibe .pd-anim -> todo visible (fallback seguro, sin animación). - Con JS: recibe .pd-anim en el -> los elementos de reveal arrancan ocultos y reveal.js les añade .pd-shown al entrar en viewport -> animan. Uniforme en home, contact y producto, sin depender del estado guardado del HTML. */ #MainContent, .content-for-layout { background: transparent !important; } /* Utilidad: ocultar (barra de anuncios sin elemento activo). */ .pd-hide { display: none !important; } /* Header sticky: acompaña al hacer scroll. */ #header-group { position: sticky; top: 0; z-index: 100; background: rgb(242 240 233); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } /* Quitar las flechas nativas de los inputs number (usamos steppers propios). */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .instant-scroll-trigger { transition: opacity 0.6s ease, transform 0.6s ease; } /* Estado oculto inicial (solo con JS). !important para ganar a las reglas de Instant. */ html.pd-anim .instant-scroll-trigger.instant-reveal--fade:not(.pd-shown), html.pd-anim .instant-scroll-trigger.instant-reveal--transform-fade:not(.pd-shown), html.pd-anim .instant-scroll-trigger.instant-reveal--transform:not(.pd-shown) { opacity: 0 !important; } html.pd-anim .instant-scroll-trigger.instant-reveal--transform-fade:not(.pd-shown), html.pd-anim .instant-scroll-trigger.instant-reveal--transform:not(.pd-shown) { transform: var(--instant-reveal-from-translate, translateY(24px)) var(--instant-reveal-from-scale, scale(1)) var(--instant-reveal-from-rotate, rotate(0deg)) !important; } /* Estado revelado */ html.pd-anim .instant-scroll-trigger.pd-shown { opacity: 1 !important; transform: none !important; } /* Movimiento reducido: sin animación, todo visible */ @media (prefers-reduced-motion: reduce) { html.pd-anim .instant-scroll-trigger { transition: none !important; } html.pd-anim .instant-scroll-trigger.instant-reveal--fade:not(.pd-shown), html.pd-anim .instant-scroll-trigger.instant-reveal--transform-fade:not(.pd-shown), html.pd-anim .instant-scroll-trigger.instant-reveal--transform:not(.pd-shown) { opacity: 1 !important; transform: none !important; } } /* Logo (imagen) en el nombre de marca de header y footer. !important para ganar a la regla de imágenes de Instant (width:100%). */ .pd-logo { height: 32px !important; width: auto !important; max-width: 100%; display: block; } .pd-logo--footer { height: 44px !important; } /* Item del header activo según la ruta actual. */ .is-nav-active, .is-nav-active p { color: #ff1b82 !important; } /* Scrollbar con el mismo color de fondo del sitio (cream). !important porque el tema (Horizon/Polaris) define el scrollbar y se carga DESPUÉS de este archivo. */ html { background: rgb(242 240 233) !important; scrollbar-color: rgba(0, 0, 0, 0.28) rgb(242 240 233) !important; scrollbar-width: thin !important; } ::-webkit-scrollbar { width: 12px; height: 12px; background: rgb(242 240 233) !important; } ::-webkit-scrollbar-track { background: rgb(242 240 233) !important; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.24) !important; border-radius: 999px !important; border: 3px solid rgb(242 240 233) !important; } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.38) !important; } /* Tarjeta destacada de la home: sin borde divisor ni padding derecho. */ .iGNECgUrcOey1XdwS { border: 0 !important; padding-right: 0 !important; padding-inline-end: 0 !important; } /* Grid destacado de la home: separación entre tarjetas y sin zoom en la imagen. */ .izux5qMuAaWq8JHj4 { gap: 28px !important; } .idCytoDlqZJ6fFNrd:hover { transform: none !important; } /* Header más compacto (era 70-80px). */ .ixFJ7wvHmK3dKUM3u { height: 56px !important; } /* Hover consistente y visible en los iconos del header (user, cart, menú). */ .i4pATBkEqzSD0AD9J .iocmplIZn85IvIDNW { background: transparent !important; } .i4pATBkEqzSD0AD9J .iWoKuPOmiFhQLVXqY, .i4pATBkEqzSD0AD9J .i3nCeNfxC6b01FYor, .i4pATBkEqzSD0AD9J .if6Nv2sXPy1bXNua0 { border-radius: 999px !important; } .i4pATBkEqzSD0AD9J .iWoKuPOmiFhQLVXqY:hover, .i4pATBkEqzSD0AD9J .i3nCeNfxC6b01FYor:hover, .i4pATBkEqzSD0AD9J .if6Nv2sXPy1bXNua0:hover { background: rgba(255, 27, 130, 0.12) !important; color: #ff1b82 !important; } /* Header: ocultar al bajar, mostrar al subir (smooth). */ #header-group { transition: transform 0.32s ease; will-change: transform; } #header-group.pd-header-hidden { transform: translateY(-100%); } /* Badge con nº de items del carrito (header). Se oculta si es 0. */ .iWoKuPOmiFhQLVXqY { position: relative; } .pd-cart-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: #ff1b82; color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; } .pd-cart-badge[data-count="0"], .pd-cart-badge[data-count=""] { display: none; } /* Borde superior del footer en el color pasado. */ .iw6C7gSOqtKtssoqe { background: #e7ded6 !important; } /* Hero de la home: sin altura forzada de 100vh (quitar espacio sobrante). */ .ib7WhhIhu0cSxikBM { min-height: auto !important; } /* Items de nav del menú móvil (texto convertido en navegable). */ .pd-menu-link { cursor: pointer; } /* ---- Menú móvil (overlay) ---- */ .iKfVECONSD8i5YA6T { position: fixed !important; inset: 0 !important; height: 100dvh !important; min-height: 100dvh !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 26px !important; padding: 80px 24px 48px !important; } .iKfVECONSD8i5YA6T .iH9cdElhqTEEAQhEa { position: absolute !important; top: 16px !important; right: 16px !important; width: 44px !important; height: 44px !important; display: grid !important; place-items: center !important; border: 0 !important; background: transparent !important; cursor: pointer; } .iKfVECONSD8i5YA6T .iH9cdElhqTEEAQhEa svg { width: 26px !important; height: 26px !important; } .iKfVECONSD8i5YA6T .iJKR5W6LgJtpwc8hr { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 24px !important; width: 100% !important; max-width: 420px !important; } .iKfVECONSD8i5YA6T .iwemEtc6gsaQxQ8zp { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 22px !important; } .iKfVECONSD8i5YA6T .pd-menu-link p { font-family: "Playfair Display", Georgia, serif !important; font-size: 30px !important; line-height: 1.1 !important; text-align: center !important; margin: 0 !important; transition: color 0.15s; } .iKfVECONSD8i5YA6T .pd-menu-link:hover p { color: #ff1b82 !important; } .iKfVECONSD8i5YA6T .i5tcogbfnb7yNl22E { margin-top: 10px !important; background: #ff1b82 !important; border-radius: 999px !important; padding: 14px 34px !important; } .iKfVECONSD8i5YA6T .i5tcogbfnb7yNl22E p { color: #fff !important; font-weight: 600 !important; margin: 0 !important; } /* Iconos del header (user, carrito, menú) en rosa. */ .iJaytn7AFU6HNs31I .instant-icon { color: #ff1b82 !important; }