/* ══════════════════════════════════════════════════════════════════
PAYUCA-BRAND.CSS — manual de marca web de La Payuca (código fuente)
Copia exacta de sitio-web/css/custom.css (fuente de verdad real).
Cualquier proyecto web de La Payuca (catering, CRM, futuros) copia
este archivo + el bloque tailwind.config + los de Google Fonts
documentados en pautas-diseño-web.md ("Cómo adoptar en un proyecto nuevo").
Si el sitio principal cambia su custom.css, volver a copiar acá.
La mayoría de las clases son universales (paleta, botones, cards,
badges, loader, tooltip, inputs, accesibilidad). Un puñado son
específicas del sitio público y son inofensivas si no se usan en
otro proyecto (no rompen nada si el HTML no tiene esas clases):
.cart-sheet, .carrito-flotante, .back-to-top, .typewriter-cursor,
.menu.menu-sm.dropdown-content (nav mobile del sitio).
══════════════════════════════════════════════════════════════════ */
/* Fuentes: se cargan vía con preconnect en el de cada página (más rápido que @import). */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* PALETA LA PAYUCA (Manual de marca v1.0) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
--payuca-negro: #111111;
--payuca-blanco: #FFFFFF;
--payuca-crema: #EFE6D8;
--payuca-bordo: #6E1F1B;
--payuca-cuero: #B17A45;
--payuca-carbon: #2B2B2B;
--payuca-gris-claro: #F5F0EB;
--payuca-success: #10B981;
--payuca-warning: #F59E0B;
--payuca-error: #EF4444;
--payuca-info: #3B82F6;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* TEMA daisyUI "payuca" */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-theme="payuca"] {
--p: 6E1F1B;
--pf: 551815;
--pc: FFFFFF;
--s: B17A45;
--sf: 8E6237;
--sc: FFFFFF;
--a: EFE6D8;
--af: D4C4AE;
--ac: 111111;
--n: 2B2B2B;
--nf: 111111;
--nc: FFFFFF;
--b1: FFFFFF;
--b2: F5F0EB;
--b3: EFE6D8;
--bc: 111111;
--in: 3B82F6;
--su: 10B981;
--wa: F59E0B;
--er: EF4444;
--rounded-box: 0.25rem;
--rounded-btn: 0.25rem;
--rounded-badge: 0.25rem;
--btn-text-case: uppercase;
--animation-btn: 0.2s;
}
body {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
}
.font-editorial {
font-family: 'Merriweather', Georgia, serif;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* CLASES UTILITARIAS LA PAYUCA */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bg-payuca-negro { background-color: var(--payuca-negro); }
.bg-payuca-crema { background-color: var(--payuca-crema); }
.bg-payuca-carbon { background-color: var(--payuca-carbon); }
.text-payuca-bordo { color: var(--payuca-bordo); }
.text-payuca-cuero { color: var(--payuca-cuero); }
.text-payuca-crema { color: var(--payuca-crema); }
/* Nav: detalle bordo vino, subrayado que crece en hover */
.nav-link { position: relative; padding-bottom: 4px; }
.nav-link::after {
content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
background: var(--payuca-bordo); transition: right 0.25s ease;
}
.nav-link:hover::after { right: 0; }
.hero-overlay-payuca {
/* Más oscuro en el centro para que el texto del hero se lea sobre fotos con mucho detalle */
background: linear-gradient(
to bottom,
rgba(43, 43, 43, 0.4) 0%,
rgba(43, 43, 43, 0.68) 50%,
rgba(17, 17, 17, 0.88) 100%
);
}
/* Las vars del tema daisyUI están en formato inválido (hex sin # en vez de HSL),
así que btn-primary/badge-primary renderizaban transparentes. Definición real de marca: */
.btn-primary {
background-color: var(--payuca-bordo);
border-color: var(--payuca-bordo);
color: var(--payuca-crema);
}
.btn-primary:hover {
background-color: #551815;
border-color: #551815;
color: var(--payuca-crema);
}
.btn-primary:disabled,
.btn-primary[disabled] {
background-color: rgba(110, 31, 27, 0.35);
color: rgba(239, 230, 216, 0.55);
}
.badge-primary {
background-color: var(--payuca-bordo);
border-color: var(--payuca-bordo);
color: #fff;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* COMPONENTES CUSTOM LA PAYUCA */
/* Fuente: herramientas-diseño/payuca-sitio-web/PALETA-COLORES.css */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Card plato — hover con borde bordo (solo dispositivos con mouse; en touch el hover falso molesta) */
.card-plato {
border: 2px solid transparent;
transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), border-color 200ms ease, box-shadow 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
.card-plato:hover {
border-color: var(--payuca-bordo);
box-shadow: 0 8px 16px rgba(110, 31, 27, 0.15);
transform: translateY(-4px);
}
}
/* Feedback de presión: el botón confirma el tap al instante (clave en mobile) */
.btn {
transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease;
}
.btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
.btn:active { transform: none; }
.card-plato, .card-plato:hover { transform: none; }
}
.card-plato-precio {
color: var(--payuca-crema);
font-size: 1.75rem;
font-weight: bold;
}
/* Boton destacado (bordo + cuero) */
.btn-payuca-destacado {
background-color: var(--payuca-bordo);
border: 2px solid var(--payuca-cuero);
color: white;
font-weight: bold;
transition: all 0.3s ease;
}
.btn-payuca-destacado:hover {
background-color: var(--payuca-cuero);
border-color: var(--payuca-bordo);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(110, 31, 27, 0.3);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* BOTONES — feedback táctil (Fase 2) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Presión 3D: el borde inferior da profundidad y se hunde al tocar. CTAs primarios. */
.btn-3d {
border-bottom: 4px solid rgba(0, 0, 0, 0.35);
transition: transform 0.08s ease, border-bottom-width 0.08s ease, box-shadow 0.08s ease;
}
.btn-3d:active {
transform: translateY(3px);
border-bottom-width: 1px;
}
.btn-3d:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Barrido: relleno direccional en hover (izq. a der.). CTAs secundarios/outline. */
.btn-sweep {
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn-sweep::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: var(--payuca-bordo);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s linear;
}
.btn-sweep:hover::after,
.btn-sweep:focus-visible::after {
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
.btn-3d { transition: none; }
.btn-sweep::after { transition: none; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* MOBILE — touch targets + carrito (Fase 3) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Nav mobile (hamburger): menu-sm de daisyUI deja los links en ~27px, por debajo del mínimo táctil */
.menu.menu-sm.dropdown-content a {
min-height: 44px;
display: flex;
align-items: center;
}
/* Carrito de delivery en mobile: dropdown arriba a la derecha → bottom sheet, más cómodo con el pulgar */
@media (max-width: 640px) {
.cart-sheet {
position: fixed !important;
inset: auto 0 0 0 !important;
width: 100% !important;
max-width: 100% !important;
max-height: 75vh;
overflow-y: auto;
border-radius: 16px 16px 0 0;
margin: 0 !important;
z-index: 100;
}
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* SKELETON — shimmer de carga (Fase 5A) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.skeleton {
position: relative;
overflow: hidden;
background: #E7DFD1;
border-radius: 0.375rem;
}
.skeleton::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
transform: translateX(-100%);
animation: sk-shimmer 1.6s infinite;
}
@keyframes sk-shimmer {
100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
.skeleton::after { animation: none; display: none; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* FRUTILLAS (Fase 6) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Cursor parpadeante del typewriter del hero */
.typewriter-cursor::after {
content: '|';
display: inline-block;
margin-left: 2px;
animation: tw-blink 0.8s step-end infinite;
}
@keyframes tw-blink {
50% { opacity: 0; }
}
/* Botón "volver arriba" — páginas largas (menu-qr, delivery) */
.back-to-top {
position: fixed;
bottom: 88px;
right: 24px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--payuca-bordo);
color: var(--payuca-crema);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
line-height: 1;
border: none;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
opacity: 0;
pointer-events: none;
transform: translateY(10px);
transition: opacity .25s ease, transform .25s ease;
z-index: 998;
}
.back-to-top.show {
opacity: 1;
pointer-events: auto;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.typewriter-cursor::after { animation: none; }
.back-to-top { transition: none; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* TRANSICIONES DE PÁGINA (Fase 4) */
/* View Transitions API nativa: cross-fade entre páginas sin JS, sin re-inicializar */
/* nada (Firebase, carrito, mapa) porque cada navegación sigue siendo una carga real. */
/* Degrada a salto directo en navegadores sin soporte (Safari/Firefox) — sin penalidad. */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
}
}
/* Badge urgencia pulsante */
.badge-nuevo {
background-color: var(--payuca-error);
color: white;
animation: pulse-urgencia 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-urgencia {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Estados de pedido (admin) */
.estado-nuevo {
background-color: rgba(239, 68, 68, 0.1);
color: var(--payuca-error);
}
.estado-preparando {
background-color: rgba(245, 158, 11, 0.1);
color: var(--payuca-warning);
}
.estado-en-camino {
background-color: rgba(59, 130, 246, 0.1);
color: var(--payuca-info);
}
.estado-entregado {
background-color: rgba(16, 185, 129, 0.1);
color: var(--payuca-success);
}
/* Carrito flotante */
.carrito-flotante {
background-color: var(--payuca-blanco);
border-top: 4px solid var(--payuca-bordo);
box-shadow: 0 -4px 12px rgba(110, 31, 27, 0.1);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* GLASSMORPHISM (UIverse #5) */
/* Fuente: herramientas-diseño/uiverse/ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.glass-card {
background: rgba(36, 36, 36, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 14px;
padding: 14px 16px;
color: #ffffff;
box-shadow: 0 20px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.08);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* BURGER MENU ANIMADO (UIverse #1) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.burger {
position: relative;
width: 40px;
height: 30px;
background: transparent;
cursor: pointer;
display: block;
}
.burger input { display: none; }
.burger span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: white;
border-radius: 9px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.burger span:nth-of-type(1) { top: 0px; transform-origin: left center; }
.burger span:nth-of-type(2) { top: 50%; transform: translateY(-50%); transform-origin: left center; }
.burger span:nth-of-type(3) { top: 100%; transform-origin: left center; transform: translateY(-100%); }
.burger input:checked ~ span:nth-of-type(1) { transform: rotate(45deg); top: 0px; left: 5px; }
.burger input:checked ~ span:nth-of-type(2) { width: 0%; opacity: 0; }
.burger input:checked ~ span:nth-of-type(3) { transform: rotate(-45deg); top: 28px; left: 5px; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* LOADER ANILLOS (UIverse #12) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.loader-payuca {
display: inline-block;
width: 48px;
height: 48px;
border: 4px solid var(--payuca-crema);
border-top-color: var(--payuca-bordo);
border-radius: 50%;
animation: spin-payuca 0.8s linear infinite;
}
@keyframes spin-payuca {
to { transform: rotate(360deg); }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* INPUT GLOW (UIverse #9, adaptado bordo) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.input-glow {
transition: border-color 0.3s, box-shadow 0.3s;
}
.input-glow:focus {
border-color: var(--payuca-bordo) !important;
box-shadow: 0 0 0 3px rgba(110, 31, 27, 0.15);
outline: none;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* TOOLTIP (UIverse #15) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tooltip-payuca {
position: relative;
cursor: pointer;
}
.tooltip-payuca::before {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) scale(0.8);
padding: 6px 12px;
background: var(--payuca-carbon);
color: white;
font-size: 0.75rem;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
.tooltip-payuca:hover::before {
opacity: 1;
transform: translateX(-50%) scale(1);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ENTRADA SUAVE AL CARGAR (headers internos)*/
/* Reutilizable en menu-qr, delivery, reservas, galería */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes fade-up-load {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
.fade-up-load {
opacity: 0;
animation: fade-up-load 800ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
animation-delay: var(--load-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
.fade-up-load { opacity: 1; animation: none; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ACCESSIBILITY (WCAG AA) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn:focus-visible,
.input:focus-visible,
a:focus-visible {
outline: 2px solid var(--payuca-bordo);
outline-offset: 2px;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* NOTYF — Toasts La Payuca */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.notyf__toast--success { background: var(--payuca-bordo) !important; }
.notyf__toast--error { background: var(--payuca-carbon) !important; border-left: 4px solid var(--payuca-error); }
.notyf__toast--warning { background: var(--payuca-cuero) !important; }
.notyf {
font-family: 'Montserrat', sans-serif !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
letter-spacing: 0.03em !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ACCESIBILIDAD */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Focus visible para navegación con teclado (no afecta el click) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible {
outline: 2px solid var(--payuca-cuero);
outline-offset: 2px;
}