/** * ============================================================================ * CAFETERÍA PREMIUM - Efectos Visuales Premium * ============================================================================ * Cursor personalizado, neomorphism, partículas, transiciones cinematográficas * Nivel agencia premium * ============================================================================ */ /* ─── Cursor Personalizado ──────────────────────────────────────────────────── */ /* Solo se oculta el cursor nativo cuando JS añade la clase a . Si el JS falla, el cursor nativo se mantiene (no rompe la web). */ @media (hover: hover) and (pointer: fine) { body.custom-cursor * { cursor: none !important; } .cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: var(--color-primary); border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s, background 0.2s; mix-blend-mode: difference; } .cursor-ring { position: fixed; top: 0; left: 0; width: 40px; height: 40px; border: 1.5px solid rgba(200, 169, 126, 0.5); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, border-color 0.3s, background 0.3s; } } /* Estados del cursor (hover sobre elementos interactivos) */ .cursor-ring.cursor-hover { width: 64px; height: 64px; border-color: var(--color-primary); background: rgba(200, 169, 126, 0.1); } .cursor-dot.cursor-hover { width: 0; height: 0; } .cursor-ring.cursor-click { width: 28px; height: 28px; background: rgba(200, 169, 126, 0.3); } /* ─── Partículas de café (canvas) ───────────────────────────────────────────── */ .particles-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.6; } /* ─── Three.js canvas ───────────────────────────────────────────────────────── */ .three-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* ─── Efecto Vapor / Steam ──────────────────────────────────────────────────── */ .steam-container { position: relative; display: inline-block; } .steam { position: absolute; height: 60px; width: 12px; border-radius: 50%; background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%); filter: blur(8px); opacity: 0; animation: steam-rise 4s infinite ease-out; } .steam:nth-child(1) { left: 30%; animation-delay: 0s; } .steam:nth-child(2) { left: 45%; animation-delay: 1s; } .steam:nth-child(3) { left: 60%; animation-delay: 2s; } .steam:nth-child(4) { left: 50%; animation-delay: 0.5s; } @keyframes steam-rise { 0% { transform: translateY(0) scaleX(1); opacity: 0; } 15% { opacity: 0.6; } 50% { transform: translateY(-40px) scaleX(2.5); opacity: 0.3; } 100% { transform: translateY(-80px) scaleX(4); opacity: 0; } } /* ─── Neomorphism ───────────────────────────────────────────────────────────── */ .neomorphic { background: var(--bg-secondary); border-radius: var(--radius-xl); box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.08), -8px -8px 20px rgba(255, 255, 255, 0.7); border: none; transition: var(--transition-base); } .neomorphic:hover { box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1), -4px -4px 12px rgba(255, 255, 255, 0.8); } .neomorphic--inset { box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.08), inset -6px -6px 12px rgba(255, 255, 255, 0.7); } [data-theme="dark"] .neomorphic { background: #1e1e35; box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.4), -8px -8px 20px rgba(45, 45, 68, 0.4); } [data-theme="dark"] .neomorphic:hover { box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5), -4px -4px 12px rgba(45, 45, 68, 0.5); } /* ─── Glassmorphism Premium ─────────────────────────────────────────────────── */ .glass-premium { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-xl); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); } [data-theme="dark"] .glass-premium { background: rgba(26, 26, 46, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); } /* ─── Cinematic Page Transition ─────────────────────────────────────────────── */ .page-transition { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99990; pointer-events: none; display: flex; } .page-transition__panel { flex: 1; background: var(--color-secondary); transform: scaleY(0); transform-origin: bottom; } .page-transition.active { pointer-events: all; } /* ─── Texto con gradiente animado ───────────────────────────────────────────── */ .gradient-text { background: linear-gradient( 135deg, var(--color-primary) 0%, var(--color-accent) 25%, var(--color-primary-light) 50%, var(--color-accent) 75%, var(--color-primary) 100% ); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-shift 6s ease infinite; } @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ─── Glow pulsante para elementos destacados ───────────────────────────────── */ .glow-pulse { animation: glow-pulse 3s ease-in-out infinite; } @keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 20px rgba(200, 169, 126, 0.3); } 50% { box-shadow: 0 0 40px rgba(200, 169, 126, 0.6); } } /* ─── Image hover reveal premium ────────────────────────────────────────────── */ .img-hover-zoom { overflow: hidden; border-radius: var(--radius-xl); } .img-hover-zoom img { transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .img-hover-zoom:hover img { transform: scale(1.08); } /* ─── Scroll Progress Bar ───────────────────────────────────────────────────── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); z-index: var(--z-fixed); width: 0%; transition: width 0.1s linear; } /* ─── Marquee / Texto deslizante ────────────────────────────────────────────── */ .marquee { overflow: hidden; white-space: nowrap; padding: 1.5rem 0; } .marquee__inner { display: inline-block; animation: marquee 25s linear infinite; } .marquee__inner span { font-family: var(--font-primary); font-size: 2.5rem; color: var(--color-primary); opacity: 0.3; margin: 0 2rem; text-transform: uppercase; letter-spacing: 2px; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ─── Reveal mask para texto cinematográfico ────────────────────────────────── */ .reveal-mask { overflow: hidden; display: inline-block; } .reveal-mask > * { display: inline-block; } /* Desactivar cursor custom en touch */ @media (hover: none) { .cursor-dot, .cursor-ring { display: none !important; } } /* Respeta reduce-motion */ @media (prefers-reduced-motion: reduce) { .steam, .gradient-text, .glow-pulse, .marquee__inner { animation: none !important; } .particles-canvas, .three-canvas { display: none !important; } } /* ============================================================================ CARTA PROFESIONAL ============================================================================ */ /* ─── Hero de la carta ──────────────────────────────────────────────────────── */ .carta-hero { position: relative; height: 60vh; min-height: 420px; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; } .carta-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .carta-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,15,26,0.6) 0%, rgba(15,15,26,0.55) 40%, rgba(15,15,26,0.92) 100%); } .carta-hero__content { position: relative; z-index: 2; max-width: 760px; padding: 0 1.5rem; } .carta-hero__label { display: inline-block; font-family: var(--font-accent); color: var(--color-primary); letter-spacing: 4px; text-transform: uppercase; font-size: 0.95rem; margin-bottom: 1rem; } .carta-hero__title { font-size: clamp(2.8rem, 7vw, 5.5rem); color: #fff; line-height: 1.05; margin-bottom: 1.2rem; } .carta-hero__subtitle { color: rgba(255,255,255,0.82); font-size: clamp(1rem, 2vw, 1.25rem); max-width: 580px; margin: 0 auto; } .carta-hero__scroll { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 2; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,0.4); border-radius: 20px; } .carta-hero__scroll span { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background: var(--color-primary); border-radius: 2px; animation: scrollDot 1.8s infinite; } @keyframes scrollDot { 0%{opacity:0;top:8px;} 40%{opacity:1;} 80%{opacity:0;top:22px;} 100%{opacity:0;} } /* ─── Toolbar sticky ────────────────────────────────────────────────────────── */ .carta-toolbar { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--bg-primary); border-bottom: 1px solid var(--border-color); padding: 1rem 0 0.75rem; backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); } .carta-toolbar .container { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } .carta-toolbar__search { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 0.6rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-pill); padding: 0.7rem 1.2rem; color: var(--text-muted); transition: var(--transition-base); } .carta-toolbar__search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(200,169,126,0.12); } .carta-toolbar__search input { flex: 1; border: none; background: transparent; color: var(--text-primary); font-size: 0.95rem; } .carta-toolbar__filters { display: flex; gap: 0.6rem; flex-wrap: wrap; } .carta-select { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-pill); padding: 0.7rem 1.2rem; color: var(--text-primary); font-size: 0.9rem; cursor: pointer; transition: var(--transition-base); } .carta-select:hover { border-color: var(--color-primary); } /* ─── Tabs de categorías ────────────────────────────────────────────────────── */ .carta-tabs { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.9rem 0 0.3rem; scrollbar-width: none; } .carta-tabs::-webkit-scrollbar { display: none; } .carta-tab { white-space: nowrap; padding: 0.55rem 1.1rem; border-radius: var(--radius-pill); background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; transition: var(--transition-base); } .carta-tab:hover { border-color: var(--color-primary); color: var(--color-primary); } .carta-tab--active { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); } [data-theme="dark"] .carta-tab--active { background: var(--color-primary); color: var(--color-secondary); border-color: var(--color-primary); } /* ─── Secciones de la carta ─────────────────────────────────────────────────── */ .carta-main { padding: 3.5rem 0 2rem; } .carta-section { margin-bottom: 4rem; scroll-margin-top: 180px; } .carta-section__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; } .carta-section__icon { font-size: 1.8rem; width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--border-color); } .carta-section__title { font-family: var(--font-primary); font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0; line-height: 1.1; } .carta-section__line { display: block; width: 60px; height: 3px; margin-top: 0.5rem; background: linear-gradient(90deg, var(--color-primary), transparent); border-radius: 2px; } .carta-section__count { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; } /* ─── Grid y tarjetas de plato ──────────────────────────────────────────────── */ .carta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.8rem; } .dish { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); overflow: hidden; transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.4s; } .dish:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: rgba(200,169,126,0.4); } .dish__media { position: relative; height: 200px; overflow: hidden; } .dish__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94); } .dish:hover .dish__media img { transform: scale(1.08); } .dish__tags { position: absolute; top: 0.8rem; left: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.35rem; max-width: 80%; } .tag { font-size: 0.68rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.4px; backdrop-filter: blur(6px); } .tag--new { background: rgba(76,175,80,0.92); color: #fff; } .tag--top { background: rgba(200,169,126,0.95); color: #1a1a2e; } .tag--vegan { background: rgba(102,187,106,0.92); color: #fff; } .tag--gf { background: rgba(66,165,245,0.92); color: #fff; } .dish__body { padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; } .dish__head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.6rem; } .dish__name { font-family: var(--font-primary); font-size: 1.15rem; font-weight: 700; margin: 0; line-height: 1.2; } .dish__dots { flex: 1; border-bottom: 2px dotted var(--border-color); transform: translateY(-4px); min-width: 12px; } .dish__price { font-family: var(--font-primary); font-weight: 700; font-size: 1.15rem; white-space: nowrap; color: var(--color-primary); } .dish__desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 0.8rem; flex: 1; } .dish__meta { display: flex; gap: 1rem; align-items: center; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.6rem; } .dish__rec { color: var(--color-primary); font-weight: 600; } .dish__details { margin-bottom: 1rem; } .dish__details summary { font-size: 0.8rem; color: var(--color-primary); cursor: pointer; font-weight: 600; list-style: none; user-select: none; } .dish__details summary::-webkit-details-marker { display: none; } .dish__details summary::before { content: '＋ '; font-weight: 700; } .dish__details[open] summary::before { content: '－ '; } .dish__details p { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.4rem; line-height: 1.5; } .dish__add { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.85rem 1rem; border-radius: var(--radius-pill); background: var(--color-secondary); color: #fff; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.5px; transition: var(--transition-base); } .dish__add:hover { background: var(--color-primary); color: var(--color-secondary); transform: translateY(-2px); box-shadow: var(--shadow-glow); } [data-theme="dark"] .dish__add { background: var(--color-primary); color: var(--color-secondary); } [data-theme="dark"] .dish__add:hover { background: var(--color-primary-light); } /* ─── Estado vacío ──────────────────────────────────────────────────────────── */ .carta-empty { text-align: center; padding: 4rem 2rem; } .carta-empty__icon { font-size: 3.5rem; margin-bottom: 1rem; opacity: 0.5; } /* ─── Leyenda ───────────────────────────────────────────────────────────────── */ .carta-legend { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-muted); align-items: center; } .carta-legend__note { width: 100%; text-align: center; margin-top: 0.5rem; font-style: italic; font-size: 0.8rem; } /* ─── Responsive carta ──────────────────────────────────────────────────────── */ @media (max-width: 640px) { .carta-grid { grid-template-columns: 1fr; gap: 1.2rem; } .carta-section__count { display: none; } .carta-toolbar__filters { width: 100%; } .carta-select { flex: 1; } } /* ─── Sección Experiencia (3 pilares) ───────────────────────────────────────── */ .experience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.8rem; } .experience-card { position: relative; padding: 3rem 2rem 2.5rem; text-align: center; overflow: hidden; transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.45s; } .experience-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); } .experience-card__num { position: absolute; top: 0.5rem; right: 1.2rem; font-family: var(--font-primary); font-size: 4rem; font-weight: 800; color: var(--color-primary); opacity: 0.12; line-height: 1; } .experience-card__icon { font-size: 2.8rem; margin-bottom: 1rem; display: inline-block; animation: floatY 4s ease-in-out infinite; } .experience-card:nth-child(2) .experience-card__icon { animation-delay: 0.6s; } .experience-card:nth-child(3) .experience-card__icon { animation-delay: 1.2s; } .experience-card h3 { font-family: var(--font-primary); font-size: 1.4rem; margin-bottom: 0.8rem; } .experience-card p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; margin: 0; } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Línea decorativa superior en hover */ .experience-card::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--color-primary), transparent); transition: width 0.5s ease; } .experience-card:hover::before { width: 100%; } /* ─── Tratamiento cinematográfico del video del hero ────────────────────────── */ /* Look premium: desaturado, cálido y con contraste, no color pleno */ .hero__video { filter: grayscale(0.85) contrast(1.08) brightness(0.78) sepia(0.18); transform: scale(1.05); } /* Overlay más cinematográfico y elegante sobre el hero */ .hero .hero__overlay { background: radial-gradient(ellipse at center, rgba(15,15,26,0.35) 0%, rgba(15,15,26,0.75) 100%), linear-gradient(180deg, rgba(15,15,26,0.55) 0%, rgba(15,15,26,0.45) 45%, rgba(15,15,26,0.95) 100%); } /* Viñeta sutil en los bordes del hero (estilo cine) */ .hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; box-shadow: inset 0 0 200px 40px rgba(0,0,0,0.55); } /* Grano de película muy sutil sobre el hero */ .hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Asegurar que el contenido del hero quede por encima de viñeta y grano */ .hero__content { z-index: 3 !important; } .hero__scroll { z-index: 3; } /* ============================================================================ HOME EDITORIAL PROFESIONAL ============================================================================ */ /* ─── Link con flecha ───────────────────────────────────────────────────────── */ .link-arrow { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.3px; color: var(--color-primary); margin-top: 0.5rem; } .link-arrow svg { transition: transform 0.3s ease; } .link-arrow:hover svg { transform: translateX(6px); } /* ─── Manifiesto ────────────────────────────────────────────────────────────── */ .manifiesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .manifiesto__title { font-family: var(--font-primary); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; margin: 0.8rem 0 1.5rem; } .manifiesto__text p { font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.2rem; } .manifiesto__media { position: relative; } .manifiesto__img { border-radius: var(--radius-2xl); overflow: hidden; aspect-ratio: 4/5; } .manifiesto__img img { width: 100%; height: 100%; object-fit: cover; } .manifiesto__badge { position: absolute; bottom: -1.5rem; left: -1.5rem; padding: 1.5rem 2rem; border-radius: var(--radius-xl); display: flex; flex-direction: column; text-align: center; } .manifiesto__badge-num { font-family: var(--font-primary); font-size: 2.2rem; font-weight: 800; color: var(--color-primary); line-height: 1; } .manifiesto__badge-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); order: -1; } /* ─── Origen (split full-bleed) ─────────────────────────────────────────────── */ .origen { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; } .origen__media { position: relative; overflow: hidden; } .origen__media img { width: 100%; height: 100%; object-fit: cover; } .origen__content { background: var(--color-secondary); color: #fff; display: flex; align-items: center; padding: 4rem clamp(2rem, 5vw, 5rem); } .origen__inner { max-width: 460px; } .origen__title { font-family: var(--font-primary); color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin: 0.8rem 0 1.5rem; line-height: 1.15; } .origen__content p { color: rgba(255,255,255,0.72); font-size: 1.05rem; line-height: 1.8; margin-bottom: 2rem; } .origen__list { display: flex; flex-direction: column; gap: 1rem; } .origen__list li { padding-left: 1.5rem; position: relative; color: rgba(255,255,255,0.85); font-size: 0.98rem; border-left: 2px solid var(--color-primary); } .origen__list strong { color: var(--color-primary); display: block; font-family: var(--font-primary); font-size: 1.1rem; margin-bottom: 0.2rem; } /* ─── Ambiente (galería asimétrica) ─────────────────────────────────────────── */ .ambiente-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; gap: 1.2rem; } .ambiente-grid__item { border-radius: var(--radius-xl); overflow: hidden; } .ambiente-grid__item img { width: 100%; height: 100%; object-fit: cover; } .ambiente-grid__item--tall { grid-row: span 2; } .ambiente-grid__item--wide { grid-column: span 2; } /* ─── CTA Reserva ───────────────────────────────────────────────────────────── */ .cta-reserva { background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-light)); padding: clamp(4rem, 8vw, 7rem) 0; text-align: center; position: relative; overflow: hidden; } .cta-reserva::before { content: ''; position: absolute; top: -30%; right: -10%; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(200,169,126,0.12) 0%, transparent 70%); } .cta-reserva__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 0 1.5rem; } .cta-reserva__title { font-family: var(--font-primary); color: #fff; font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; } .cta-reserva__text { color: rgba(255,255,255,0.72); font-size: 1.1rem; margin-bottom: 2.2rem; } .cta-reserva__buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ─── Responsive home editorial ─────────────────────────────────────────────── */ @media (max-width: 860px) { .manifiesto__grid { grid-template-columns: 1fr; gap: 3rem; } .manifiesto__media { order: -1; } .origen { grid-template-columns: 1fr; } .origen__media { min-height: 320px; } .ambiente-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; } .ambiente-grid__item--wide { grid-column: span 2; } } @media (max-width: 480px) { .ambiente-grid { grid-template-columns: 1fr; } .ambiente-grid__item--tall, .ambiente-grid__item--wide { grid-row: auto; grid-column: auto; } .manifiesto__badge { left: 1rem; bottom: 1rem; } } /* ─── Banner de mesa activa (pedido por QR) ─────────────────────────────────── */ .mesa-banner { position: fixed; top: 0; left: 0; width: 100%; z-index: calc(var(--z-fixed) + 1); background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)); color: var(--color-secondary); } .mesa-banner__inner { display: flex; align-items: center; justify-content: center; gap: 0.8rem; padding: 0.6rem 1rem; font-size: 0.9rem; font-weight: 600; flex-wrap: wrap; } .mesa-banner__dot { width: 9px; height: 9px; border-radius: 50%; background: #1a1a2e; animation: blink 1.4s infinite; } @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} } .mesa-banner__link { color: var(--color-secondary); text-decoration: underline; font-weight: 700; } /* Bajar el header cuando hay banner de mesa */ .mesa-banner ~ .header, body:has(.mesa-banner) .header { top: 44px; } /* ─── Fix: selects legibles en modo oscuro (sitio público) ──────────────────── */ [data-theme="dark"] select, [data-theme="dark"] .carta-select, [data-theme="dark"] select.form-input { color-scheme: dark; color: var(--text-primary); } [data-theme="dark"] select option, [data-theme="dark"] .carta-select option, [data-theme="dark"] .form-input option { background-color: #1A1A2E; color: #F0F0F0; } /* En modo claro, opciones claras legibles */ [data-theme="light"] select option { background-color: #FFFFFF; color: #1A1A2E; } /* ─── Botón flotante "Pedir la cuenta" ──────────────────────────────────────── */ .pay-fab { position: fixed; bottom: 6.5rem; right: 1.5rem; z-index: var(--z-fixed); display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.3rem; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-secondary); font-weight: 700; font-size: 0.9rem; box-shadow: var(--shadow-glow); transition: var(--transition-base); } .pay-fab:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow-strong); } /* ─── Modal de pago ─────────────────────────────────────────────────────────── */ .pay-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: var(--z-modal-backdrop); opacity: 0; visibility: hidden; transition: var(--transition-base); } .pay-overlay.active { opacity: 1; visibility: visible; } .pay-modal { position: fixed; bottom: 0; left: 50%; transform: translate(-50%, 100%); width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; background: var(--bg-card); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; z-index: var(--z-modal); transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); border: 1px solid var(--border-color); border-bottom: none; } .pay-modal.active { transform: translate(-50%, 0); } .pay-modal__header { display: flex; justify-content: space-between; align-items: center; padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--border-color); } .pay-modal__header h3 { margin: 0; font-family: var(--font-primary); font-size: 1.2rem; } .pay-modal__header button { background: none; border: none; font-size: 1.2rem; color: var(--text-primary); cursor: pointer; } .pay-modal__body { padding: 1.5rem; } .pay-total { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; background: var(--bg-secondary); border-radius: var(--radius-lg); margin-bottom: 0.5rem; } .pay-total strong { font-family: var(--font-primary); font-size: 1.6rem; color: var(--color-primary); } .pay-sub { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.3rem; } .pay-methods { display: flex; flex-direction: column; gap: 0.7rem; } .pay-method { display: flex; align-items: center; gap: 1rem; text-align: left; padding: 1rem 1.2rem; border-radius: var(--radius-lg); background: var(--bg-secondary); border: 1px solid var(--border-color); transition: var(--transition-base); color: var(--text-primary); } .pay-method:hover { border-color: var(--color-primary); transform: translateX(4px); } .pay-method__ico { font-size: 1.6rem; } .pay-method span span, .pay-method > span { display: flex; flex-direction: column; } .pay-method small { color: var(--text-muted); font-size: 0.78rem; } .pay-transfer { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border-color); } .pay-data { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px dashed var(--border-color); font-size: 0.9rem; } .pay-data span { color: var(--text-muted); } .pay-data code { font-weight: 700; color: var(--color-primary); } .pay-data > div { display: flex; align-items: center; gap: 0.5rem; } .pay-copy { background: var(--color-primary); color: var(--color-secondary); border: none; border-radius: var(--radius-sm); padding: 0.2rem 0.6rem; font-size: 0.72rem; font-weight: 700; cursor: pointer; } @media (max-width: 520px) { .pay-fab { right: 1rem; bottom: 6rem; padding: 0.7rem 1rem; font-size: 0.82rem; } } /* ─── PWA: botón instalar + instrucciones iOS ───────────────────────────────── */ .pwa-install { position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: var(--z-fixed); display: none; align-items: center; gap: 0.5rem; padding: 0.8rem 1.3rem; border-radius: var(--radius-pill); background: var(--color-secondary); color: #fff; font-weight: 700; font-size: 0.88rem; border: 1px solid var(--color-primary); box-shadow: var(--shadow-lg); animation: pwaPop 0.4s ease; } [data-theme="dark"] .pwa-install { background: var(--color-primary); color: var(--color-secondary); border:none; } .pwa-install:hover { transform: translateY(-3px); } @keyframes pwaPop { from { transform: scale(0.8); opacity:0; } to { transform: scale(1); opacity:1; } } .ios-install { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: var(--z-modal); display: none; align-items: flex-end; justify-content: center; padding: 1rem; } .ios-install.active { display: flex; } .ios-install__card { background: var(--bg-card); border-radius: var(--radius-2xl); padding: 2rem; max-width: 420px; width: 100%; text-align: center; position: relative; border: 1px solid var(--border-color); } .ios-install__card h3 { font-family: var(--font-primary); margin: 0.5rem 0; } .ios-install__card ol { text-align: left; margin-top: 1rem; padding-left: 1.2rem; display:flex; flex-direction:column; gap:0.6rem; } .ios-install__card li { color: var(--text-secondary); font-size: 0.92rem; } .ios-install__close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.2rem; color: var(--text-primary); cursor: pointer; } @media (max-width: 520px) { .pwa-install { left: 1rem; bottom: 1rem; } } /* ─── Verificación de pago con IA ───────────────────────────────────────────── */ .pay-verify { margin-top: 1rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--bg-secondary); border: 1px solid var(--border-color); } .pay-verify__label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.3rem; } .pay-verify__hint { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.6rem; } .pay-verify textarea { width: 100%; font-size: 0.85rem; } .pay-verify__result { margin-top: 0.8rem; padding: 0.8rem 1rem; border-radius: var(--radius-md); font-size: 0.85rem; line-height: 1.5; } .pay-verify__result--ok { background: rgba(76,175,80,0.12); border: 1px solid rgba(76,175,80,0.4); color: #4CAF50; } .pay-verify__result--warn { background: rgba(255,152,0,0.12); border: 1px solid rgba(255,152,0,0.4); color: #FF9800; } /* ─── Seguimiento de pedido (tracking) ──────────────────────────────────────── */ .track-steps { display: flex; justify-content: space-between; margin-bottom: 1.5rem; position: relative; } .track-steps::before { content:''; position:absolute; top:22px; left:8%; right:8%; height:3px; background:var(--border-color); z-index:0; } .track-step { display:flex; flex-direction:column; align-items:center; gap:0.4rem; position:relative; z-index:1; flex:1; } .track-step__dot { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; background:var(--bg-secondary); border:2px solid var(--border-color); transition:var(--transition-base); } .track-step small { font-size:0.7rem; color:var(--text-muted); text-align:center; } .track-step--done .track-step__dot { background:var(--color-primary); border-color:var(--color-primary); } .track-step--active .track-step__dot { box-shadow:0 0 0 6px rgba(200,169,126,0.2); animation:pulseStep 1.5s infinite; } @keyframes pulseStep { 0%,100%{box-shadow:0 0 0 6px rgba(200,169,126,0.2);} 50%{box-shadow:0 0 0 12px rgba(200,169,126,0);} } .track-status { padding:1.3rem 1.5rem; border-radius:var(--radius-xl); margin-bottom:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; } .track-status__main { display:flex; align-items:center; gap:1rem; } .track-status__main span { font-size:2.2rem; } .track-status__main strong { font-family:var(--font-primary); font-size:1.3rem; } .track-driver { display:flex; align-items:center; gap:0.8rem; } .track-map { width:100%; height:380px; border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--border-color); z-index:1; } .car-marker__inner { font-size:32px; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4)); animation:carBob 1s ease-in-out infinite; } .home-marker__inner { font-size:28px; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4)); } @keyframes carBob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} } .leaflet-container { background:#1a1a2e; }