/* ============================================================ AUREUM · Capa de Optimización UI/UX (launch-ready) Se carga al final del , por lo que refina y unifica los estilos inline de las 7 páginas sin duplicarlos. ============================================================ */ /* ------------------------------------------------------------ 1 · MICRO-INTERACCIONES — Tarjetas de platillo / evento / galería Elevación sutil + sombra profunda + zoom de imagen contenido. Equivale a: hover:-translate-y-1 hover:shadow-xl transition-all duration-300 ------------------------------------------------------------ */ .dish-card { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; will-change: transform; } .dish-card:hover, .dish-card:focus-within { transform: translateY(-6px); box-shadow: 0 22px 55px -14px rgba(0,0,0,.72), 0 0 26px rgba(201,162,75,.16); border-color: #C9A24B; } /* Zoom contenido de la foto dentro de la tarjeta (overflow ya está en hidden) */ .dish-card img { transition: transform .6s cubic-bezier(.2,.8,.2,1); } .dish-card:hover img, .dish-card:focus-within img { transform: scale(1.06); } /* Figuras de galería y filosofía: mismo lenguaje de elevación */ .gal-fig:hover { box-shadow: 0 18px 44px -16px rgba(0,0,0,.7); } /* ------------------------------------------------------------ 2 · BOTONES — lift físico al hover, retorno al pulsar ------------------------------------------------------------ */ .cta-primary, .cta-secondary { will-change: transform; } .cta-primary:hover, .cta-secondary:hover { transform: translateY(-2px); } .cta-primary:active, .cta-secondary:active { transform: translateY(0); } /* ------------------------------------------------------------ 3 · NAVBAR · GLASSMORPHISM al hacer scroll El blur base ya existe; al desplazar añadimos saturación, opacidad y sombra flotante (clase .scrolled desde el JS). ------------------------------------------------------------ */ .nav-glass { backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%); transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease, backdrop-filter .35s ease; } .nav-glass.scrolled { background-color: rgba(11,11,12,.80) !important; /* bg-opacity-80 */ border-color: rgba(201,162,75,.22) !important; box-shadow: 0 10px 34px rgba(0,0,0,.38); } /* ------------------------------------------------------------ 4 · CAPAS DE LECTURA (Overlays) Utilidad reutilizable para garantizar legibilidad impecable sobre cualquier imagen de fondo. ------------------------------------------------------------ */ .read-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); } /* bg-black/50 */ .read-overlay--gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,.45) 0%, rgba(11,11,12,.72) 55%, rgba(11,11,12,.92) 100%); } /* Refuerzo: las secciones hero ya usan bg-obsidian/8x; aquí garantizamos contraste mínimo del texto sobre foto aunque cambie la imagen. */ section > img[class*="object-cover"] + .absolute { background-color: rgba(11,11,12,.55); } /* ------------------------------------------------------------ 5 · BOTONES FLOTANTES — z-index supremo (nunca tapados) Se mantienen por encima de modales de navegación y secciones. ------------------------------------------------------------ */ .fab-whatsapp { z-index: 9999 !important; } .fab-menu { z-index: 9998 !important; } /* En móvil, si coinciden con el footer, siguen flotando por encima */ .fab-whatsapp, .fab-menu { position: fixed !important; } /* ------------------------------------------------------------ 6 · ACCESIBILIDAD — foco visible dorado coherente con la marca ------------------------------------------------------------ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .zone-chip input:focus-visible + .chip-box { outline: 2px solid #E4C877; outline-offset: 3px; border-radius: 3px; } /* Enlaces de navegación: subrayado dorado animado al hover (desktop) */ @media (hover:hover) and (min-width:1024px) { header nav ul a { position: relative; } header nav ul a::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: linear-gradient(90deg,#9C7A2E,#E4C877,#C9A24B); transition: width .3s ease; } header nav ul a:hover::after { width: 100%; } } /* ------------------------------------------------------------ 7 · IMÁGENES — fundido de entrada suave al cargar (percepción de calidad) ------------------------------------------------------------ */ img[loading="lazy"] { } /* ------------------------------------------------------------ 8 · PREFERENCIA DE MOVIMIENTO REDUCIDO — respeto total ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .dish-card, .dish-card img, .cta-primary, .cta-secondary, .nav-glass, header nav ul a::after { transition: none !important; transform: none !important; } }