/* Fuentes cargadas de forma no-bloqueante desde (ver index.html), no via @import aquí. */ /* ============ TOKENS — Kinetic/Motion-First "Fuego callejero" (design-system/genials/MASTER.md) ============ */ :root { --bg: #0b0c0a; --bg-alt: #14160f; --fg: #f5f0e6; --accent: #96ff1a; /* verde real del logo Genials, ver design-system/genials/MASTER.md */ --accent-2: #ff4d1c; /* vermellón — pasa a secundario: urgencia (llamar/reservar) */ --gold: #ffd23f; /* ámbar — detalle (badges TOP/PREMIUM/VEG que no son la campeona) */ --muted: #1a1d15; --muted-fg: #a5ab97; --border: #262b1e; --radius: 0px; --border-w: 2px; --ease: cubic-bezier(.16,1,.3,1); --font-display: 'Unbounded', sans-serif; --font-body: 'Inter Tight', system-ui, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html.lenis { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { font-family: var(--font-body); background: var(--bg); color: var(--fg); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; } .container { max-width: 1360px; margin: 0 auto; padding: 0 24px; } .chapter { position: relative; padding: 120px 0; border-bottom: var(--border-w) solid var(--border); } .chapter.alt { background: var(--muted); } .chapter-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 8vw, 6rem); color: transparent; -webkit-text-stroke: 1.5px #6b7d52; /* verde-neutro, contraste 3:1+ sobre --bg y --muted, ver HANDOFF */ line-height: 1; margin-bottom: 16px; } h1, h2, h3 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: .92; } h2 { font-size: clamp(2.2rem, 6vw, 4.5rem); } h3 { font-size: clamp(1.2rem, 3vw, 1.6rem); } p { color: var(--muted-fg); font-size: 1.05rem; max-width: 58ch; } .lede { color: var(--fg); font-size: clamp(1.1rem, 2.5vw, 1.5rem); max-width: 40ch; } /* Cursor custom — solo puntero fino */ .cursor-dot { position: fixed; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); pointer-events: none; z-index: 200; mix-blend-mode: difference; transform: translate(-50%,-50%); transition: width 200ms var(--ease), height 200ms var(--ease); display: none; } @media (hover: hover) and (pointer: fine) { .cursor-dot { display: block; } body { cursor: none; } a, button, .plato-card { cursor: none; } } .cursor-dot.grow { width: 56px; height: 56px; } /* Botones */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 18px 32px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: .95rem; border: var(--border-w) solid var(--fg); transition: background 150ms, color 150ms, transform 150ms var(--ease); } .btn-accent { background: var(--accent); color: var(--bg); border-color: var(--accent); } .btn-accent:hover { background: var(--fg); border-color: var(--fg); transform: translate(-3px,-3px); } .btn-urgent { background: var(--accent-2); color: var(--bg); border-color: var(--accent-2); } .btn-urgent:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: translate(-3px,-3px); } .btn-ghost { color: var(--fg); } .btn-ghost:hover { background: var(--fg); color: var(--bg); } .btn:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; } .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; border-top: var(--border-w) solid var(--border); background: var(--bg); } .mobile-cta a { flex: 1; text-align: center; padding: 16px 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: .85rem; } .mobile-cta a:first-child { background: var(--accent-2); color: var(--bg); } .mobile-cta a:last-child { background: var(--accent); color: var(--bg); } @media (min-width: 1024px) { .mobile-cta { display: none; } } /* Nav */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; mix-blend-mode: difference; } .nav-logo { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; text-transform: uppercase; color: var(--fg); } .nav-links { display: none; gap: 32px; font-weight: 600; text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; } @media (min-width: 1024px) { .nav-links { display: flex; } } .nav-links a { color: var(--fg); } /* HERO */ .hero { position: relative; height: 100svh; overflow: hidden; border-bottom: var(--border-w) solid var(--border); } .hero-media { position: absolute; inset: -10% -10% -10% -10%; z-index: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.15) brightness(.6); } .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 0%, rgba(11,11,12,.2) 45%, rgba(11,11,12,.55) 100%); } .hero-type { position: absolute; z-index: 2; left: 0; right: 0; bottom: 6vh; padding: 0 4vw; } .hero-type h1 { font-size: clamp(3.2rem, 15vw, 11rem); overflow: hidden; } .hero-type h1 span { display: block; transform: translateY(110%); } .hero-kicker { position: absolute; z-index: 2; top: 110px; left: 24px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .12em; color: var(--accent-2); border: var(--border-w) solid var(--accent-2); padding: 6px 14px; background: rgba(11,11,12,.6); } .hero-scroll { position: absolute; z-index: 2; right: 24px; bottom: 6vh; writing-mode: vertical-rl; font-size: .78rem; text-transform: uppercase; letter-spacing: .15em; color: var(--muted-fg); font-weight: 600; } .hero-rating { position: absolute; z-index: 2; top: 110px; right: 24px; text-align: right; font-weight: 700; color: var(--gold); font-family: var(--font-display); } .hero-award { position: absolute; z-index: 2; top: 160px; left: 24px; display: flex; align-items: center; gap: 10px; background: var(--accent); color: var(--bg); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; padding: 8px 14px 8px 8px; } .hero-award img { width: 34px; height: 34px; object-fit: contain; background: var(--bg); } .hero-rating small { display: block; color: var(--muted-fg); font-weight: 500; font-family: var(--font-body); font-size: .78rem; text-transform: none; letter-spacing: 0; } /* Marquee doble dirección */ .marquee-wrap { overflow: hidden; border-bottom: var(--border-w) solid var(--border); padding: 18px 0; } .marquee-wrap.rev { background: var(--accent); } .marquee-track { display: flex; width: max-content; animation: marquee 26s linear infinite; } .marquee-wrap.rev .marquee-track { animation-direction: reverse; animation-duration: 20s; } .marquee-track span { font-family: var(--font-display); display: inline-flex; align-items: center; font-weight: 900; text-transform: uppercase; font-size: 1.3rem; padding: 0 28px; white-space: nowrap; } .marquee-wrap.rev .marquee-track span { color: var(--bg); } .marquee-track span::after { content: "/"; margin-left: 28px; color: var(--accent); } .marquee-wrap.rev .marquee-track span::after { color: var(--bg); opacity: .5; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Secuencia editorial numerada (sustituye "features" en grid) */ .editorial-row { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; padding: 56px 0; border-top: 1px solid var(--border); } @media (min-width: 900px) { .editorial-row { grid-template-columns: 120px 1fr 1fr; gap: 48px; } } .editorial-row:first-of-type { border-top: none; } /* Foto que crece de card a pantalla completa (pineada) */ .reveal-pin { position: relative; height: 100vh; overflow: hidden; } .reveal-photo-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .reveal-photo { width: 40vw; max-width: 420px; aspect-ratio: 4/5; overflow: hidden; } .reveal-photo img { width: 100%; height: 100%; object-fit: cover; } .reveal-caption { position: absolute; z-index: 2; bottom: 64px; left: 24px; right: 24px; } .reveal-caption h2 { font-size: clamp(2rem, 8vw, 5rem); } /* CARTA — track horizontal (pineado en desktop, snap nativo en touch) */ #carta { padding-top: 120px; padding-bottom: 120px; } .carta-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 24px; } .carta-tab { border: var(--border-w) solid var(--border); padding: 10px 20px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: .8rem; } .carta-tab.active, .carta-tab:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); } .carta-track-outer { position: relative; } .carta-track { display: flex; gap: 24px; will-change: transform; } @media (hover: hover) and (pointer: fine) { .carta-track-pin { height: 100vh; overflow: hidden; position: relative; } .carta-track-pin .carta-track { position: absolute; top: 50%; left: 0; transform: translateY(-50%); padding-left: 24px; } } @media (hover: none), (pointer: coarse) { .carta-track { overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 24px 20px; -webkit-overflow-scrolling: touch; } .carta-track::-webkit-scrollbar { display: none; } } .plato-card { flex: 0 0 70vw; scroll-snap-align: start; border: var(--border-w) solid var(--border); background: var(--bg-alt); position: relative; overflow: hidden; } @media (min-width: 1024px) { .plato-card { flex-basis: 34vw; } } .plato-img-wrap { aspect-ratio: 4/5; overflow: hidden; background: var(--muted); } .plato-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); } .plato-card:hover .plato-img-wrap img { transform: scale(1.06); } .plato-badge { position: absolute; top: 14px; left: 14px; background: var(--gold); color: var(--bg); font-family: var(--font-display); font-size: .68rem; font-weight: 700; text-transform: uppercase; padding: 5px 12px; z-index: 2; } .plato-badge.champion { background: var(--accent); } .plato-card.champion { border-color: var(--accent); } .plato-body { padding: 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; } .plato-body h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); } .plato-price { font-family: var(--font-display); color: var(--accent); font-weight: 700; font-size: 1.2rem; white-space: nowrap; } .carta-loading, .carta-error { padding: 40px 24px; color: var(--muted-fg); font-weight: 700; text-transform: uppercase; } /* Panel lateral de detalle (sustituye modal centrado) */ .detail-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 92vw); background: var(--bg-alt); border-left: var(--border-w) solid var(--fg); z-index: 100; transform: translateX(100%); transition: transform 350ms var(--ease); overflow-y: auto; } .detail-panel.open { transform: translateX(0); } .detail-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 99; opacity: 0; pointer-events: none; transition: opacity 300ms; } .detail-scrim.open { opacity: 1; pointer-events: auto; } .detail-close { position: absolute; top: 20px; right: 20px; font-size: 2rem; font-family: var(--font-display); z-index: 2; } .detail-panel img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .detail-body { padding: 28px; } .detail-price { font-family: var(--font-display); color: var(--accent); font-size: 1.4rem; margin: 10px 0 20px; } .detail-block { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; } .detail-block-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; color: var(--muted-fg); margin-bottom: 6px; } /* Reseñas — ticker rotatorio grande */ .reviews-ticker { overflow: hidden; position: relative; height: 220px; display: flex; align-items: center; } .review-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; } .review-slide.active { opacity: 1; visibility: visible; } @media (prefers-reduced-motion: no-preference) { .review-slide { transition: opacity 150ms linear, visibility 0s 150ms; } .review-slide.active { transition: opacity 150ms linear, visibility 0s; } } .review-slide p { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2.4rem); color: var(--fg); font-weight: 700; text-transform: none; max-width: 70ch; } .review-slide small { margin-top: 16px; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } /* Mosaico fotos (sustituye grid de emojis Instagram) */ .foto-mosaico { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-top: 32px; } @media (min-width: 768px) { .foto-mosaico { grid-template-columns: repeat(4, 1fr); } } .mosaico-tile { position: relative; aspect-ratio: 1; overflow: hidden; } .mosaico-tile img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5); transition: filter 300ms, transform 400ms var(--ease); } .mosaico-tile:hover img { filter: grayscale(0); transform: scale(1.08); } .mosaico-tile figcaption { position: absolute; inset: auto 0 0 0; padding: 10px; font-size: .75rem; font-weight: 700; text-transform: uppercase; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); opacity: 0; transition: opacity 250ms; } .mosaico-tile:hover figcaption { opacity: 1; } /* Local / horario — timeline vertical asimétrica */ .local-grid { display: grid; grid-template-columns: 1fr; gap: 48px; margin-top: 40px; } @media (min-width: 900px) { .local-grid { grid-template-columns: 1fr 1fr; } } .timeline-row { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--border); padding: 16px 0; } .timeline-row .day { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; } .timeline-row .hrs { color: var(--accent); font-weight: 700; } .map-embed { width: 100%; aspect-ratio: 4/3; border: var(--border-w) solid var(--border); filter: grayscale(1) invert(.92) contrast(.9); } /* FAQ */ .faq-item { border-bottom: var(--border-w) solid var(--border); } .faq-q { width: 100%; text-align: left; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; } .faq-q span { color: var(--accent); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 300ms var(--ease); } .faq-a p { padding-bottom: 24px; } .faq-item.open .faq-a { max-height: 300px; } /* Footer editorial gigante */ footer { padding: 96px 0 120px; } @media (min-width: 1024px) { footer { padding: 96px 0; } } .footer-word { font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 14vw, 11rem); line-height: .85; color: transparent; -webkit-text-stroke: 1.5px var(--fg); text-transform: uppercase; } .footer-links { display: flex; flex-wrap: wrap; gap: 24px; margin: 40px 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: .9rem; } .footer-bottom { border-top: 1px solid var(--border); padding-top: 20px; font-size: .8rem; color: var(--muted-fg); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } [aria-disabled="true"] { opacity: .35; pointer-events: none; } /* Reveal on scroll genérico (para reduced-motion / secciones simples) */ .rv { opacity: 0; transform: translateY(28px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); } .rv.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }