/* ══════════════════════════════════════════════════════════════════════════ SKIN: DÍA DE MUERTOS · `dia_de_muertos` (temporada, Gemas) La vitrina como ofrenda: portada ilustrada (papel picado, altar y arco de cempasúchil), una tira de papel picado colgando sobre la página y cada pieza en su NICHO de altar — arco de medio punto con filo rosa mexicano y aro de cempasúchil, coronado por una calaverita o una flor. Caen pétalos detrás de las piezas y al agregar brota una ráfaga de flores y calaveritas. Rosa mexicano de acento, no naranja: el naranja es la flor, y una interfaz naranja la apagaría. Esta hoja es el TEMA: paleta, portada, fondo de página y barras. La silueta de cada pieza vive en `marco_nicho.css` (ranura marco) y el adorno del logo en `insignia_cempasuchil.css` (ranura insignia): se equipan por separado y este set los trae puestos por defecto. Reglas de toda skin: ver el encabezado de `halloween_noche.css`. 🔁 Al tocar este archivo o su arte sube `PUBLIC_CATALOG_ASSET_VERSION`. ══════════════════════════════════════════════════════════════════════════ */ :root[data-storefront-skin='dia_de_muertos'] { --surface: #fff6ea; --surface-raised: #fffdf8; --surface-sunken: #fbeedc; --ink: #2b1a24; --ink-soft: #6d5560; --ink-faint: #a08a92; --line: rgba(194, 24, 91, 0.14); --accent: #c2185b; --accent-strong: #9c1149; --accent-contrast: #ffffff; --accent-ink: #a3134c; --accent-glow: rgba(194, 24, 91, 0.28); --accent-tint: #fde3ee; /* `--font-display` también pinta nombres de pieza y precios: Abril Fatface es letra de cartel, así que queda sólo en el nombre del negocio (abajo). */ --font-display: 'Fraunces', 'Inter', ui-serif, Georgia, serif; --media-bg: #ffffff; --page-wash: var(--surface); /* La barra pegajosa (mecánica en `catalog.css`). */ --sticky-bg: #5c0e3a; --sticky-ink: #fff6ea; --sticky-social-ink: #ffd89a; --sticky-edge: #f59e0b; --sticky-font: 'Abril Fatface', var(--font-display); --sticky-shadow: 0 6px 18px rgba(92, 14, 58, 0.35); } /* ── Portada: la ofrenda ────────────────────────────────────────────────── */ /* Ilustración 4:3 generada con IA (WebP 55 KB): papel picado arriba, altar a la izquierda, arco de flores a la derecha y el centro crema VACÍO para el logo y el nombre. El degradado funde el pie con la página. */ :root[data-storefront-skin='dia_de_muertos'] .shop-header { padding-top: 74px; padding-bottom: 40px; border-bottom: none; margin-bottom: 40px; background: linear-gradient( to bottom, rgba(255, 246, 234, 0) 0%, rgba(255, 246, 234, 0.35) 62%, #fff6ea 100% ), url('art/dia_de_muertos.scene.webp') no-repeat, #fff3e2; background-size: 100% 100%, auto max(118%, calc(100vw / 1.33)); background-position: 0 0, center calc(40% + var(--skin-scroll, 0) * 0.12px); } @media (min-width: 700px) { :root[data-storefront-skin='dia_de_muertos'] .shop-header { background-position: 0 0, center calc(5% + var(--skin-scroll, 0) * 0.12px); } } /* El nombre se lee sobre el crema del centro; un halo lo despega de las banderas si el nombre es largo. */ :root[data-storefront-skin='dia_de_muertos'] .shop-header__name { font-family: 'Abril Fatface', var(--font-display); font-weight: 400; color: #9c1149; text-shadow: 0 0 14px #fff6ea, 0 0 6px #fff6ea; } /* ── Papel picado colgando bajo la portada ──────────────────────────────── */ :root[data-storefront-skin='dia_de_muertos'] .shop-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -40px; height: 46px; pointer-events: none; background: url('art/dia_de_muertos.picado.svg') repeat-x top center / 250px 46px; filter: drop-shadow(0 4px 6px rgba(43, 26, 36, 0.18)); } /* ── El aire de la página: pétalos lejanos, apenas ──────────────────────── */ :root[data-storefront-skin='dia_de_muertos'] .clay-bg { background-color: var(--surface); background-image: radial-gradient( 100% 45% at 0% 0%, rgba(245, 158, 11, 0.14) 0%, transparent 62% ), radial-gradient( 90% 45% at 100% 100%, rgba(123, 31, 162, 0.09) 0%, transparent 66% ), url('art/dia_de_muertos.dots-near.svg'), url('art/dia_de_muertos.dots-far.svg'); background-repeat: no-repeat, no-repeat, repeat, repeat; background-size: 100% 100%, 100% 100%, 520px 520px, 360px 360px; background-position: 0 0, 0 0, 40px calc(var(--skin-scroll, 0) * -0.1px), 0 calc(var(--skin-scroll, 0) * -0.04px); } /* ── El contador, en banderita de papel picado ──────────────────────────── */ :root[data-storefront-skin='dia_de_muertos'] .controls__count { padding: 8px 14px 14px; background: #c2185b; color: #ffffff; letter-spacing: 0.06em; text-transform: uppercase; clip-path: polygon( 0 0, 100% 0, 100% 76%, 90% 100%, 80% 76%, 70% 100%, 60% 76%, 50% 100%, 40% 76%, 30% 100%, 20% 76%, 10% 100%, 0 76% ); } :root[data-storefront-skin='dia_de_muertos'] .grid-hint { font-style: italic; color: var(--accent-ink); } :root[data-storefront-skin='dia_de_muertos'] .grid-hint::before { content: '🕯️ '; font-style: normal; } /* ── La barra del pedido: mantel morado con filo de cempasúchil ─────────── */ :root[data-storefront-skin='dia_de_muertos'] .order-bar { background: #4a1036; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 3px solid #f59e0b; box-shadow: 0 -10px 26px rgba(74, 16, 54, 0.4); } :root[data-storefront-skin='dia_de_muertos'] .order-bar__text { color: #fff6ea; font-weight: 600; } :root[data-storefront-skin='dia_de_muertos'] .order-bar__text::before { content: '🛒 '; } :root[data-storefront-skin='dia_de_muertos'] .order-bar__count { border-color: #4a1036; } /* El arte de la barra pegajosa va como regla y no como token: un `url()` dentro de una variable se resuelve contra la hoja que la USA (`catalog.css`), no contra ésta, y la imagen no cargaría. */ :root[data-storefront-skin='dia_de_muertos'] .skin-sticky { background: linear-gradient(rgba(92, 14, 58, 0.9), rgba(92, 14, 58, 0.9)), url('art/dia_de_muertos.scene.webp') center top / cover no-repeat, #5c0e3a; }