/* Sistema de diseño compartido de la tienda Jissez. Enlazar en el de todas las páginas de tienda/. Las clases utilitarias vienen de Tailwind (CDN); aquí van solo las piezas a medida que Tailwind no cubre. */ html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, sans-serif; background: #faf9f4; color: #1c2434; -webkit-font-smoothing: antialiased; /* clip (no hidden): evita desbordes horizontales sin romper position:sticky. */ overflow-x: clip; } ::selection { background: #1e3a8a; color: #fff; } /* ---- Pizarrón / superficie azul con textura de puntos ---- */ .board-tex { background-color: #1e3a8a; background-image: radial-gradient(circle at 18% 12%, rgba(255,255,255,.08), transparent 38%), radial-gradient(circle at 86% 78%, rgba(255,255,255,.06), transparent 42%), radial-gradient(rgba(255,255,255,.05) 0.6px, transparent 0.6px); background-size: auto, auto, 4px 4px; } .board-deep { background-color: #16276b; } /* ---- Subrayado de gis ---- Usa background-gradient (no ::after) para que el texto pueda envolver en pantallas estrechas sin desbordar, subrayando cada línea. */ .chalk-u { background-image: linear-gradient(var(--accent, #f2cf6b), var(--accent, #f2cf6b)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0.16em; padding-bottom: 0.05em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .chalk-u.thin { background-size: 100% 0.11em; } /* ---- Placeholder rayado para imágenes/PDF pendientes ---- */ .ph { background-color: #f1f0ea; background-image: repeating-linear-gradient(135deg, rgba(30,58,138,.06) 0 8px, transparent 8px 16px); border: 1px dashed rgba(30,58,138,.22); color: #9ba3af; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; text-align: center; } .ph.on-board { background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); color: #c9d4f1; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 8px, transparent 8px 16px); } /* ---- Aparición al hacer scroll ---- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ---- Hover 3D para tarjetas ---- */ .lift { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .lift:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(28,36,52,.4); } /* ---- Chips de filtro (catálogo, admin) ---- */ .chip { transition: all .14s ease; cursor: pointer; user-select: none; } .chip.active { background: #1e3a8a; color: #fff; border-color: #1e3a8a; } .chip:not(.active):hover { border-color: #1e3a8a; color: #1e3a8a; } /* ---- Botón de opción de paquete (producto) ---- */ .opt-btn { transition: all .14s ease; } .opt-btn.selected { background: #1e3a8a; color: #fff; border-color: #1e3a8a; } .opt-btn:not(.selected):hover { border-color: #1e3a8a; color: #1e3a8a; } /* ---- Tarjeta de producto (alias de lift, para el catálogo) ---- */ .prod-card { transition: transform .2s ease, box-shadow .2s ease; } .prod-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -22px rgba(28,36,52,.38); } /* ---- FAQ / details ---- */ details > summary { list-style: none; cursor: pointer; } details > summary::-webkit-details-marker { display: none; } details[open] .faq-plus { transform: rotate(45deg); } .faq-plus { transition: transform .25s ease; }