/* ============================================================ BERNIE DELI · SITIO WEB — estilos.css (v3) Solo tokens de tokens.css. Ni un solo hex literal aqui abajo (salvo los rgba() ya existentes, heredados de la v2). ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 76px; } body { margin: 0; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* [hidden] tiene que ganarle a cualquier display de clase. Sin esto, .btn { display: inline-flex } pisa el display:none del navegador y los botones de WhatsApp sin numero se pintan como CTA muerto. */ [hidden] { display: none !important; } /* Los botones de WhatsApp nacen con [hidden] y app.js les pone el numero y los muestra. Si hay JS (html.js, marcado desde ), reservan su sitio desde el primer pintado, invisibles: al aparecer no empujan nada (era un layout shift de 0,14 en carga fria: el hero crecia al mostrarse su CTA y arrastraba todo). Sin JS no hay clase .js y siguen en display:none, como siempre. El CTA del nav va aparte porque en movil se apaga por media query. */ .js [data-wa][hidden]:not(.nav__cta) { display: inline-flex !important; visibility: hidden; } @media (min-width: 901px) { .js .nav__cta[hidden] { display: inline-flex !important; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } a:focus-visible, button:focus-visible { outline: 3px solid var(--navy-800); outline-offset: 3px; border-radius: var(--r-sm); } [data-surface="dark"] a:focus-visible, [data-surface="dark"] button:focus-visible { outline-color: var(--cream-200); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip { position: absolute; top: -100px; left: var(--space-4); z-index: 200; background: var(--navy-800); color: var(--cream-200); padding: var(--space-3) var(--space-5); border-radius: var(--r-pill); font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-14); transition: top var(--dur-2) var(--ease-out); } .skip:focus-visible { top: var(--space-3); } .envoltorio { max-width: 1120px; margin: 0 auto; padding-left: var(--space-5); padding-right: var(--space-5); } @media (max-width: 720px) { .envoltorio { padding-left: var(--space-4); padding-right: var(--space-4); } } /* ============================================================ BOTONES ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; font-family: var(--font-sans); font-size: var(--fs-15); font-weight: 700; letter-spacing: -0.01em; border-radius: var(--r-pill); border: 1px solid transparent; transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-in); cursor: pointer; } .btn:active { transform: scale(0.98); } .btn svg { width: 18px; height: 18px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* coffee-600 y no coffee-500: cream sobre #A06A3F da 4,1:1 y el texto del boton es de 13-15 px en negrita (no cuenta como "grande"); sobre #8A5732 da 5,2:1. */ .btn--wa { background: var(--coffee-600); color: var(--cream-200); } .btn--wa:hover { background: var(--coffee-700); } .btn--wa svg { stroke: var(--cream-200); } .btn--claro { background: var(--cream-200); color: var(--navy-800); } .btn--claro:hover { background: var(--paper-white); } .btn--claro svg { stroke: var(--navy-800); } .btn--linea { background: transparent; color: var(--cream-200); border-color: rgba(245, 243, 240, 0.34); } .btn--linea:hover { background: rgba(245, 243, 240, 0.1); } .btn--linea svg { stroke: var(--cream-200); } .btn--navy { background: var(--navy-800); color: var(--cream-200); } .btn--navy:hover { background: var(--navy-700); } .btn--navy svg { stroke: var(--coffee-100); } /* ============================================================ NAV con logo en vector ============================================================ */ .nav { position: sticky; top: 0; z-index: 60; background: rgba(255, 252, 245, 0.93); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid var(--border); } .nav__inner { max-width: 1120px; margin: 0 auto; padding: var(--space-2) var(--space-5); display: flex; align-items: center; gap: var(--space-4); } .nav__logo { display: inline-flex; align-items: center; flex-shrink: 0; height: 40px; padding-right: var(--space-4); border-right: 1px solid var(--border); } .nav__logo img { height: 34px; width: auto; max-width: none; } .nav__lista { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .nav__lista::-webkit-scrollbar { display: none; } .nav__enlace { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 13px; font-family: var(--font-sans); font-size: var(--fs-14); font-weight: 600; color: var(--navy-800); border-radius: var(--r-pill); white-space: nowrap; letter-spacing: -0.01em; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } .nav__enlace:hover { background: var(--cream-100); } .nav__enlace[aria-current="true"] { background: var(--navy-800); color: var(--cream-200); } .nav__cta { margin-left: auto; flex-shrink: 0; min-height: 44px; padding: 10px 18px; font-size: var(--fs-14); } @media (max-width: 900px) { .nav__cta { display: none; } } @media (max-width: 720px) { .nav__inner { padding: var(--space-2) var(--space-3); gap: var(--space-3); } .nav__logo { padding-right: var(--space-3); height: 34px; } .nav__logo img { height: 28px; } } /* ============================================================ HERO — reticula asimetrica 7/5, superficie navy ============================================================ */ .hero { background: var(--navy-900); color: var(--cream-200); overflow: hidden; } .hero__inner { max-width: 1120px; margin: 0 auto; padding: var(--space-12) var(--space-5) var(--space-12); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-10); align-items: center; } .hero__sello { width: 76px; height: 76px; border-radius: 50%; background: var(--cream-200); padding: 5px; margin-bottom: var(--space-5); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34); } .hero__sello img { width: 100%; height: 100%; object-fit: contain; } .hero__lugar { font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coffee-100); margin: 0 0 var(--space-4); } .hero__titulo { font-family: var(--font-display); font-variation-settings: "opsz" 144, "SOFT" 50; font-weight: 500; font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -0.025em; color: var(--cream-200); margin: 0; text-wrap: balance; } .hero__bajada { font-family: var(--font-serif); font-style: italic; font-size: clamp(17px, 2vw, 20px); line-height: 1.45; color: rgba(245, 243, 240, 0.84); margin: var(--space-5) 0 0; max-width: 46ch; } .hero__acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); } .hero__media { position: relative; } .hero__precio { position: absolute; left: calc(-1 * var(--space-4)); bottom: var(--space-6); background: var(--cream-200); color: var(--navy-800); padding: var(--space-3) var(--space-5); border-radius: var(--r-lg); box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.5); } .hero__precio strong { display: block; font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-24); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .hero__precio span { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-13); color: var(--coffee-700); } @media (max-width: 880px) { .hero__inner { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-8) var(--space-4) var(--space-10); } .hero__media { order: -1; } .hero__precio { left: auto; right: var(--space-4); bottom: calc(-1 * var(--space-4)); } .hero__acciones .btn { flex: 1 1 auto; } } /* ============================================================ HERO v3 — foto/video con mascara que se abre ============================================================ */ .hero__foto { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-lg); box-shadow: 0 32px 64px -24px rgba(0, 0, 0, 0.62); clip-path: inset(0 0 0 0 round var(--r-lg)); } .hero__poster img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__video { opacity: 0; transition: opacity 1200ms var(--ease-out); /* Color de celular: se baja un punto la saturacion y se calienta apenas para que el clip viva en la misma paleta que las fotos curadas. */ filter: saturate(0.88) contrast(1.04) sepia(0.06); } .hero__video.reproduce { opacity: 1; } /* El video se funde con el navy del hero: un velo que sube desde abajo y una vineta suave en los bordes, asi el clip deja de ser un rectangulo pegado y se lee como parte del mismo fondo. Va sobre poster y video por igual. */ .hero__foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( to top, rgba(8, 19, 79, 0.55) 0%, rgba(8, 19, 79, 0.18) 34%, rgba(8, 19, 79, 0) 62% ), radial-gradient( ellipse 120% 100% at 50% 40%, rgba(8, 19, 79, 0) 58%, rgba(8, 19, 79, 0.32) 100% ); } .js .hero__foto[data-entra] { animation: revela-foto 900ms var(--ease-out) 240ms both; } @keyframes revela-foto { from { clip-path: inset(12% 8% 12% 8% round var(--r-lg)); opacity: 0.6; transform: scale(1.04); } to { clip-path: inset(0 0 0 0 round var(--r-lg)); opacity: 1; transform: none; } } @media (min-width: 880px) { .hero__foto { aspect-ratio: 4 / 5; max-height: 640px; } } /* ============================================================ SECCIONES ============================================================ */ .sec { padding: var(--space-20) 0; scroll-margin-top: 76px; } .sec--sunken { background: var(--cream-100); } .sec__cabeza { max-width: 62ch; margin-bottom: var(--space-10); } .sec__kicker { font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coffee-700); margin: 0 0 var(--space-3); } .sec__titulo { font-family: var(--font-display); font-variation-settings: "opsz" 96, "SOFT" 50; font-weight: 600; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.04; letter-spacing: -0.028em; color: var(--navy-800); margin: 0; text-wrap: balance; } .sec__intro { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-18); line-height: 1.5; color: var(--fg-muted); margin: var(--space-4) 0 0; max-width: 54ch; } @media (max-width: 720px) { .sec { padding: var(--space-12) 0; } } /* ============================================================ LA VITRINA — carrusel con scroll-snap en movil, mosaico en escritorio ============================================================ */ .vitrina { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--space-4) var(--space-4); margin: 0 calc(-1 * var(--space-4)); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .vitrina::-webkit-scrollbar { display: none; } .plato { flex: 0 0 72%; scroll-snap-align: start; position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-900); } .plato img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; } .plato--cuadrado img { aspect-ratio: 1 / 1; } .plato__placa { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-8) var(--space-4) var(--space-4); background: linear-gradient( to top, rgba(8, 19, 79, 0.92) 0%, rgba(8, 19, 79, 0.55) 60%, transparent 100% ); color: var(--cream-200); display: grid; gap: 4px; } .plato__nombre { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-20); line-height: 1.1; letter-spacing: -0.015em; margin: 0; } .plato__precio { font-family: var(--font-sans); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--coffee-100); } .plato__pedir { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--font-sans); font-size: var(--fs-14); font-weight: 700; color: var(--cream-200); text-decoration: underline; text-decoration-color: rgba(245, 243, 240, 0.4); text-underline-offset: 3px; } .plato__pedir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (min-width: 900px) { .vitrina { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; } .plato { flex: none; } } /* Entrada de la vitrina: CSS scroll-driven donde existe, IO donde no. */ @supports (animation-timeline: view()) { .js .plato { animation: entra-sube 600ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 40%; } } @supports not (animation-timeline: view()) { .js [data-revela]:not(.esta-visible) .plato { opacity: 0; } .js [data-revela].esta-visible .plato { animation: entra-sube 560ms var(--ease-out) backwards; animation-delay: calc(80ms + var(--i, 0) * 60ms); } .js [data-revela].revelada .plato { animation: none; } } @media (prefers-reduced-motion: reduce) { .js .hero__foto[data-entra], .js .plato { animation: none !important; opacity: 1 !important; clip-path: none !important; transform: none !important; } } /* ============================================================ TU DIA — tres franjas horarias ============================================================ */ .franjas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } @media (max-width: 900px) { .franjas { grid-template-columns: 1fr; } } .franja { display: flex; flex-direction: column; background: var(--paper-white); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); } .franja img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; } .franja__cuerpo { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .franja__hora { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 5px 13px; border-radius: var(--r-pill); background: var(--cream-100); border: 1px solid var(--border); font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 700; color: var(--coffee-700); font-variant-numeric: tabular-nums; } .franja__hora svg { width: 14px; height: 14px; fill: none; stroke: var(--coffee-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .franja__titulo { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-24); line-height: 1.1; letter-spacing: -0.02em; color: var(--navy-800); margin: 0; } .franja__texto { font-family: var(--font-sans); font-size: var(--fs-15); line-height: 1.55; color: var(--fg-muted); margin: 0; flex: 1; } .franja__items { list-style: none; margin: var(--space-2) 0 0; padding: var(--space-4) 0 0; border-top: 1px dotted var(--cream-300); } .franja__items li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 7px 0; font-family: var(--font-sans); font-size: var(--fs-15); color: var(--navy-800); } .franja__items b { font-weight: 500; } .franja__items span { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ============================================================ CAFE — banda oscura con foto ============================================================ */ .cafe { background: var(--navy-900); color: var(--cream-200); } .cafe__inner { max-width: 1120px; margin: 0 auto; padding: var(--space-16) var(--space-5); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-10); align-items: center; } .cafe__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); box-shadow: 0 28px 56px -20px rgba(0, 0, 0, 0.6); } .cafe .sec__kicker { color: var(--coffee-100); } .cafe .sec__titulo { color: var(--cream-200); } .cafe__texto { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-18); line-height: 1.5; color: rgba(245, 243, 240, 0.84); margin: var(--space-4) 0 0; max-width: 46ch; } .cafe__lista { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; gap: 0; } .cafe__lista li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid rgba(245, 243, 240, 0.13); font-family: var(--font-sans); font-size: var(--fs-16); color: var(--cream-200); } .cafe__lista li:last-child { border-bottom: none; } .cafe__lista em { font-family: var(--font-serif); font-style: italic; font-size: 0.86em; color: rgba(245, 243, 240, 0.62); margin-left: 8px; } .cafe__lista span { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--coffee-100); white-space: nowrap; } @media (max-width: 900px) { .cafe__inner { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-12) var(--space-4); } .cafe__media { order: -1; } } /* ============================================================ MENU + QR ============================================================ */ .menu-bloque { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--space-8); align-items: center; background: var(--paper-white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--space-8); box-shadow: var(--shadow-md); } .menu-bloque__qr { width: 210px; height: 210px; padding: var(--space-3); background: var(--cream-200); border-radius: var(--r-lg); border: 2px solid var(--navy-800); } .menu-bloque__qr svg { width: 100%; height: 100%; display: block; } .menu-bloque h2 { margin-top: 0; } .menu-bloque__nota { font-family: var(--font-sans); font-size: var(--fs-14); color: var(--fg-subtle); margin: var(--space-4) 0 0; } .menu-bloque .btn { margin-top: var(--space-5); } @media (max-width: 780px) { .menu-bloque { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: var(--space-6); } .menu-bloque__qr { width: 180px; height: 180px; } .menu-bloque .sec__intro { margin-left: auto; margin-right: auto; } } /* ============================================================ DONDE ESTAMOS ============================================================ */ .donde { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-10); align-items: start; } @media (max-width: 900px) { .donde { grid-template-columns: 1fr; gap: var(--space-8); } } .datos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); } .datos li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-4); align-items: start; } .datos svg { width: 20px; height: 20px; fill: none; stroke: var(--coffee-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; } .datos dt, .datos__rotulo { font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-subtle); margin: 0 0 3px; } .datos__valor { font-family: var(--font-sans); font-size: var(--fs-17); color: var(--navy-800); line-height: 1.45; margin: 0; } /* Los enlaces de texto van a 26px de alto minimo: WCAG 2.2 AA (2.5.8) pide 24. Los botones si llegan a 44+; obligar 44 en un enlace dentro de un parrafo partiria la linea base del texto. */ .datos__valor a { display: inline-block; min-height: 26px; padding: 3px 0; text-decoration: underline; text-decoration-color: var(--cream-300); text-underline-offset: 3px; } .datos__valor a:hover { text-decoration-color: var(--navy-800); } .donde__acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); } .donde__foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); box-shadow: 0 28px 56px -20px rgba(10, 19, 79, 0.22); } .donde__pie { font-family: var(--font-sans); font-size: var(--fs-14); color: var(--fg-muted); margin: var(--space-3) 0 0; } /* ============================================================ FOOTER ============================================================ */ .foot { background: var(--navy-900); color: var(--cream-200); padding: var(--space-16) 0 var(--space-10); } .foot__inner { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5); display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-10); } .foot__marca p { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-16); color: rgba(245, 243, 240, 0.78); margin: var(--space-4) 0 0; max-width: 34ch; } .foot h2 { font-family: var(--font-display); font-size: var(--fs-16); font-weight: 600; color: var(--coffee-100); margin: 0 0 var(--space-4); } .foot ul { list-style: none; margin: 0; padding: 0; } .foot li { font-family: var(--font-sans); font-size: var(--fs-14); color: rgba(245, 243, 240, 0.82); line-height: 1.6; padding: 4px 0; } .foot li a { display: inline-block; min-height: 26px; padding: 3px 0; } .foot a:hover { color: var(--cream-200); text-decoration: underline; text-underline-offset: 3px; } .foot__bajo { max-width: 1120px; margin: var(--space-10) auto 0; padding: var(--space-5) var(--space-5) 0; border-top: 1px solid rgba(245, 243, 240, 0.13); text-align: center; font-family: var(--font-sans); font-size: var(--fs-12); color: rgba(245, 243, 240, 0.52); letter-spacing: 0.03em; } @media (max-width: 780px) { .foot__inner { grid-template-columns: 1fr; gap: var(--space-8); text-align: center; } .foot__marca img { margin: 0 auto; } .foot__marca p { margin-left: auto; margin-right: auto; } } /* ============================================================ BARRA CTA MOVIL ============================================================ */ .barra-movil { position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; display: none; gap: 8px; padding: 10px var(--space-3) calc(10px + env(safe-area-inset-bottom)); background: rgba(247, 242, 232, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(10, 19, 79, 0.09); } .barra-movil .btn { flex: 1; min-width: 0; min-height: 46px; padding: 8px 10px; font-size: var(--fs-13); /* Una sola linea siempre: si "Como llegar" parte en dos al cambiar la fuente, la barra crece 15 px y cuenta como layout shift. */ white-space: nowrap; } .barra-movil .btn--wa { flex: 1.35; } .barra-movil .btn--claro { background: var(--paper-white); border: 1px solid var(--border); } /* ============================================================ COMO PEDIR — tres canales + banda de grupos ============================================================ */ .canales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } @media (max-width: 900px) { .canales { grid-template-columns: 1fr; } } .canal { display: flex; flex-direction: column; gap: var(--space-3); background: var(--paper-white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); } .canal__icono { width: 44px; height: 44px; border-radius: 50%; background: var(--navy-800); display: grid; place-items: center; } .canal__icono svg { width: 22px; height: 22px; fill: none; stroke: var(--cream-200); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .canal__paso { font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coffee-700); margin: var(--space-2) 0 0; } .canal h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-24); line-height: 1.1; letter-spacing: -0.02em; color: var(--navy-800); margin: 0; } .canal p { font-family: var(--font-sans); font-size: var(--fs-15); line-height: 1.55; color: var(--fg-muted); margin: 0; } .canal > p:last-of-type { flex: 1; } .canal .btn { align-self: flex-start; margin-top: var(--space-2); } .grupos { margin-top: var(--space-8); background: var(--navy-800); color: var(--cream-200); border-radius: var(--r-xl); padding: var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; } .grupos h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-24); letter-spacing: -0.02em; color: var(--cream-200); margin: 0 0 var(--space-2); } .grupos p { font-family: var(--font-sans); font-size: var(--fs-15); line-height: 1.6; color: rgba(245, 243, 240, 0.86); margin: 0; max-width: 56ch; } @media (max-width: 780px) { .grupos { grid-template-columns: 1fr; padding: var(--space-6); } .grupos .btn { width: 100%; } } /* ============================================================ PREGUNTAS —
nativo: accesible, sin JS, se indexa. ============================================================ */ .faq { max-width: 760px; display: grid; gap: var(--space-2); } .faq__item { background: var(--paper-white); border: 1px solid var(--border); border-radius: var(--r-lg); } .faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 56px; padding: var(--space-4) var(--space-5); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-18); letter-spacing: -0.015em; color: var(--navy-800); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; flex-shrink: 0; font-family: var(--font-sans); font-weight: 400; font-size: 26px; line-height: 1; color: var(--coffee-500); transition: transform var(--dur-2) var(--ease-out); } .faq__item[open] summary::after { transform: rotate(45deg); } .faq__item summary:focus-visible { outline: 3px solid var(--navy-800); outline-offset: -3px; border-radius: var(--r-lg); } .faq__item p { font-family: var(--font-sans); font-size: var(--fs-16); line-height: 1.6; color: var(--fg-muted); margin: 0; padding: 0 var(--space-5) var(--space-5); max-width: 62ch; } .faq__item p a { display: inline-block; min-height: 26px; padding: 3px 0; font-weight: 700; color: var(--navy-800); text-decoration: underline; text-decoration-color: var(--cream-300); text-underline-offset: 3px; } .faq__item p a:hover { text-decoration-color: var(--navy-800); } /* ============================================================ VIDA — movimiento con criterio. Solo transform y opacity (no repintan layout). Todo se apaga bajo prefers-reduced-motion mas abajo. Una sola apuesta fuerte: la pagina sabe que hora es en Bogota; lo demas es atmosfera. ============================================================ */ /* --- Luz de ventana sobre el hero: un halo calido que se desplaza muy despacio, como el sol entrando por la vitrina de la 15. --- */ .hero { position: relative; isolation: isolate; } /* El "resplandor de ventana" (.hero::before, un radial-gradient calido con deriva animada) se retiro el 5-sep: primero se le quito la animacion por un layout shift en carga fria, y la revision final lo marco como gradiente decorativo sin funcion (la paleta prohibe gradientes decorativos). El hero queda navy plano: la foto y el sello son la luz. */ /* --- Entrada del hero: el sello se estampa, el resto sube escalonado. --- */ .hero [data-entra] { opacity: 0; animation: entra-sube var(--dur-4) var(--ease-out) forwards; animation-delay: calc(120ms + var(--i, 0) * 90ms); } .hero .hero__sello[data-entra] { animation-name: estampa; animation-duration: 620ms; animation-timing-function: var(--ease-pop); transform-origin: 50% 50%; } @keyframes entra-sube { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } } @keyframes estampa { 0% { opacity: 0; transform: scale(1.35) rotate(-10deg); } 55% { opacity: 1; transform: scale(0.96) rotate(1.5deg); } 100% { opacity: 1; transform: none; } } /* La etiqueta de precio respira: 3px, muy lento. */ .hero__precio { animation: flota 6.5s ease-in-out infinite; animation-delay: 1.2s; } @keyframes flota { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -4px, 0); } } /* --- Revelado al scroll: cada seccion sube 18px al entrar en vista. Tres decisiones de robustez, aprendidas en la revision: 1. El estado oculto solo existe si hay JS (html.js): sin JS, buscadores y lectores ven todo. Nada depende de que el observer corra. 2. Se anima con @keyframes y fill-mode backwards, no con transition: al terminar, el elemento vuelve a SU estilo (hover, sombra), y si algun motor no ejecuta la animacion, el contenido igual se ve. 3. @media print lo apaga todo (mas abajo). --- */ .js [data-revela]:not(.esta-visible) { opacity: 0; } .js [data-revela].esta-visible { animation: entra-sube 640ms var(--ease-out) backwards; } /* Dentro de una seccion, las tarjetas entran escalonadas (el feed de la vitrina tiene su propio mecanismo mas abajo: scroll-timeline o IO). */ .js [data-revela]:not(.esta-visible) .canal, .js [data-revela]:not(.esta-visible) .franja { opacity: 0; } .js [data-revela].esta-visible .canal, .js [data-revela].esta-visible .franja { animation: entra-sube 560ms var(--ease-out) backwards; animation-delay: calc(120ms + var(--i, 0) * 70ms); } /* Cinturon: app.js pone .revelada 1,2 s despues de .esta-visible. Para entonces toda animacion de entrada ya termino, asi que quitarla no se nota; pero si un motor nunca llego a ejecutarla, el contenido igual queda visible. */ .js [data-revela].revelada, .js [data-revela].revelada .canal, .js [data-revela].revelada .franja { animation: none; } /* --- Cinta de cocina: lo que esta saliendo, en bucle lento. --- */ .cinta { background: var(--navy-800); color: var(--cream-200); border-top: 1px solid rgba(245, 243, 240, 0.1); border-bottom: 1px solid rgba(245, 243, 240, 0.1); overflow: hidden; padding: 13px 0; -webkit-mask-image: linear-gradient( 90deg, transparent, #000 6%, #000 94%, transparent ); mask-image: linear-gradient( 90deg, transparent, #000 6%, #000 94%, transparent ); } .cinta__pista { display: flex; width: max-content; animation: cinta-corre 52s linear infinite; } .cinta:hover .cinta__pista { animation-play-state: paused; } .cinta__lista { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; } .cinta__lista li { display: inline-flex; align-items: center; gap: 18px; padding: 0 18px 0 0; font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: rgba(245, 243, 240, 0.88); } .cinta__lista li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--coffee-300); } .cinta__lista li em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--coffee-100); font-size: var(--fs-14); } @keyframes cinta-corre { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* --- "Ahora": la franja que corresponde a la hora de Bogota. --- */ .franja { position: relative; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); } .franja.es-ahora { border-color: var(--coffee-500); box-shadow: 0 0 0 1px var(--coffee-500), var(--shadow-md); } .franja__ahora { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: var(--r-pill); background: var(--navy-900); color: var(--cream-200); font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5); } .franja__ahora::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coffee-100); box-shadow: 0 0 0 0 rgba(232, 201, 160, 0.7); animation: pulso 2.2s var(--ease-out) infinite; } .franja__ahora time { color: var(--coffee-100); font-weight: 600; letter-spacing: 0.02em; text-transform: none; } @keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(232, 201, 160, 0.65); } 70% { box-shadow: 0 0 0 9px rgba(232, 201, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 201, 160, 0); } } /* --- Vapor sobre el espresso. Tres hilos en SVG, cada uno con su ritmo. --- */ .cafe__media { position: relative; } .vapor { position: absolute; left: 50%; top: 8%; width: 120px; height: 150px; transform: translateX(-50%); pointer-events: none; overflow: visible; } .vapor path { fill: none; stroke: var(--cream-200); stroke-width: 2.2; stroke-linecap: round; opacity: 0; transform-origin: 50% 100%; animation: vapor-sube 4.8s ease-in-out infinite; } .vapor path:nth-child(2) { animation-delay: 1.4s; animation-duration: 5.6s; } .vapor path:nth-child(3) { animation-delay: 2.7s; animation-duration: 5.1s; } @keyframes vapor-sube { 0% { opacity: 0; transform: translate3d(0, 18px, 0) scaleX(0.9); } 25% { opacity: 0.55; } 70% { opacity: 0.22; } 100% { opacity: 0; transform: translate3d(6px, -52px, 0) scaleX(1.15); } } /* --- Todo se apaga si la persona pidio menos movimiento. --- */ @media (prefers-reduced-motion: reduce) { .hero::before, .hero__precio, .vapor path, .franja__ahora::before, .cinta__pista { animation: none !important; } .hero [data-entra] { opacity: 1; animation: none !important; } .js [data-revela], .js [data-revela] .plato, .js [data-revela] .canal, .js [data-revela] .franja { opacity: 1 !important; animation: none !important; } .faq__item summary::after { transition: none; } .cinta { -webkit-mask-image: none; mask-image: none; } .cinta__pista { width: auto; flex-wrap: wrap; } .cinta__lista { flex-wrap: wrap; row-gap: 6px; } .cinta__lista--copia { display: none; } .vapor { display: none; } } /* --- Impreso: todo visible, nada se mueve, nada fijo tapa contenido. --- */ @media print { .hero [data-entra], .js [data-revela], .js [data-revela] .plato, .js [data-revela] .canal, .js [data-revela] .franja { opacity: 1 !important; animation: none !important; transform: none !important; } .faq__item { break-inside: avoid; } .hero::before, .vapor, .cinta, .barra-movil, .skip { display: none !important; } .nav { position: static; } .franja__ahora { display: none !important; } } @media (max-width: 720px) { .barra-movil { display: flex; } body { padding-bottom: 84px; } } /* ============================================================ MENU v4 (7-sep-2026) — la carta como recorrido Cambios frente a la v3 y por que: 1. UNA sola cabecera pegajosa (.cabecera) que contiene el logo, la categoria actual y el carril de chips. La v3 apilaba dos sticky (nav + chips) con `top` en pixeles medidos a mano (51/61): en un iPhone con otra altura de nav los chips se metian debajo del logo y la pagina "parecia rota". Ahora la altura real la mide app.js y la publica en --alto-cabecera. 2. Suelos por seccion con corte duro (cream / papel alternados). Con doce secciones cortas, interpolar colores llega tarde; el corte marca el cambio de capitulo (scroll-craft, devices.md §10). 3. El destacado de cada categoria vuelve a ser una tarjeta de vitrina a todo el ancho en movil (foto + placa navy), la misma pieza memorable de la landing. Las filas de precios entran escalonadas con el motor de scroll-craft (data-sc-in / data-sc-stagger, IntersectionObserver, una vez). 4. Firma de la pagina: la cabecera respira la categoria que estas leyendo (.cabecera__actual), asi el visitante nunca pierde donde esta en 76 platos. ============================================================ */ .pagina-menu { scroll-padding-top: calc(var(--alto-cabecera, 118px) + 8px); } .cabecera { position: sticky; top: 0; z-index: 60; background: rgba(255, 252, 245, 0.96); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid var(--border); } .cabecera__fila { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: var(--space-3); padding: 8px var(--space-4) 0; min-height: 50px; } .cabecera__fila .nav__logo { height: 34px; padding-right: var(--space-3); } .cabecera__fila .nav__logo img { height: 28px; } .cabecera__actual { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-family: var(--font-display); font-variation-settings: "opsz" 48, "SOFT" 50; font-weight: 600; font-size: var(--fs-18); line-height: 1.2; letter-spacing: -0.02em; color: var(--navy-800); white-space: nowrap; text-overflow: ellipsis; } .cabecera__actual span { display: inline-block; animation: entra-sube 320ms var(--ease-out) both; } .cabecera__cta { display: none; } @media (min-width: 901px) { .cabecera__fila { padding: 8px var(--space-5) 0; min-height: 56px; } .cabecera__fila .nav__logo { height: 40px; padding-right: var(--space-4); } .cabecera__fila .nav__logo img { height: 34px; } .cabecera__actual { font-size: var(--fs-20); } .cabecera__cta { display: inline-flex; margin-left: auto; flex-shrink: 0; min-height: 44px; padding: 10px 18px; font-size: var(--fs-14); } .js .cabecera__cta[hidden] { display: inline-flex !important; visibility: hidden; } } /* El carril de categorias: sigue siendo overflow-x: auto sin scroll-snap (la falla de la v1 era overflow visible; el snap peleaba con el dedo, ver app.js 3b). */ .chips { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--space-4); padding: 8px var(--space-4) 10px; margin: 0; max-width: 1120px; margin-inline: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .chips::-webkit-scrollbar { display: none; } .chips a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: var(--paper-white); font-family: var(--font-sans); font-size: var(--fs-14); font-weight: 600; color: var(--navy-800); white-space: nowrap; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); } .chips a:active { transform: scale(0.97); } .chips a[aria-current="true"] { background: var(--navy-800); color: var(--cream-200); border-color: var(--navy-800); } /* --- Portada de la carta: la unica franja navy de la pagina ------------- */ .portada { background: var(--navy-900); color: var(--cream-200); padding: var(--space-12) 0 var(--space-10); } .portada__inner { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4); display: grid; gap: var(--space-4); } .portada__titulo { font-family: var(--font-display); font-variation-settings: "opsz" 144, "SOFT" 50; font-weight: 500; font-size: clamp(42px, 11vw, 80px); line-height: 0.98; letter-spacing: -0.03em; color: var(--cream-200); margin: 0; text-wrap: balance; } .portada__intro { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-18); line-height: 1.45; color: rgba(245, 243, 240, 0.78); margin: 0; max-width: 30ch; } .portada__datos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: var(--space-2) 0 0; padding: 0; list-style: none; font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 600; letter-spacing: 0.01em; color: var(--coffee-100); } .portada__datos li + li::before { content: "·"; margin-right: 14px; color: rgba(245, 243, 240, 0.4); } @media (min-width: 901px) { .portada { padding: var(--space-16) 0 var(--space-12); } .portada__inner { padding: 0 var(--space-5); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } .portada__intro { font-size: var(--fs-20); } .portada__datos { grid-column: 1 / -1; } } /* --- Secciones: suelo alternado, titulo grande, aterrizaje bajo la cabecera --- */ .sec--menu { padding: var(--space-8) 0 var(--space-10); scroll-margin-top: 0; background: var(--cream-50); } .sec--menu:nth-of-type(even) { background: var(--paper-white); } .sec--menu .sec__cabeza { margin-bottom: var(--space-5); max-width: none; } .sec--menu .sec__titulo { font-size: clamp(34px, 9vw, 52px); letter-spacing: -0.032em; } .sec--menu .sec__cuando { display: inline-block; margin: var(--space-3) 0 0; padding: 4px 10px; border-radius: var(--r-pill); background: var(--cream-100); font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 600; color: var(--coffee-700); } .sec--menu:nth-of-type(even) .sec__cuando { background: var(--cream-50); } @media (min-width: 901px) { .sec--menu { padding: var(--space-12) 0 var(--space-16); } .sec--menu .sec__cabeza { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: end; margin-bottom: var(--space-8); } .sec--menu .sec__intro { margin: 0; } .sec--menu .sec__cuando { grid-column: 1 / -1; justify-self: start; margin: 0; } } /* --- El destacado: tarjeta de vitrina a todo el ancho en movil ----------- */ .sec--menu .plato--destacado { margin: 0 calc(-1 * var(--space-4)) var(--space-6); border-radius: 0; box-shadow: none; } .sec--menu .plato--destacado img { aspect-ratio: 4 / 3; } .sec--menu .plato--destacado .plato__placa { padding: var(--space-12) var(--space-4) var(--space-5); } .sec--menu .plato--destacado .plato__nombre { font-size: var(--fs-24); } .sec--menu .plato--destacado .plato__desc { font-family: var(--font-sans); font-size: var(--fs-14); line-height: 1.45; color: rgba(245, 243, 240, 0.82); margin: 0; max-width: 38ch; } .sec--menu .plato--destacado .plato__precio { font-size: var(--fs-18); } .sec--menu .plato--destacado .plato__pedir { justify-self: start; } /* Sin foto real (pizza, lasagna, pasteleria, calientes, frias): la placa va sola sobre navy, compacta, sin fingir una imagen. */ .sec--menu .plato--sin-foto { background: var(--navy-800); margin: 0 0 var(--space-6); border-radius: var(--r-lg); } .sec--menu .plato--sin-foto .plato__placa { position: static; background: none; padding: var(--space-5) var(--space-4); } @media (min-width: 721px) { .sec--menu .plato--destacado { margin: 0 0 var(--space-8); border-radius: var(--r-xl); max-width: 720px; } .sec--menu .plato--destacado img { aspect-ratio: 16 / 9; } .sec--menu .plato--destacado .plato__placa { padding: var(--space-16) var(--space-6) var(--space-6); } .sec--menu .plato--destacado .plato__nombre { font-size: var(--fs-32); } } @media (min-width: 1024px) { .sec--menu .plato--destacado { max-width: none; } .sec--menu .plato--destacado img { aspect-ratio: 21 / 9; } } /* --- Grupos y filas -------------------------------------------------------- */ .grupo { margin-top: var(--space-6); } .grupo__titulo { font-family: var(--font-display); font-variation-settings: "opsz" 48, "SOFT" 50; font-weight: 600; font-size: var(--fs-24); letter-spacing: -0.02em; color: var(--navy-800); margin: 0 0 4px; } .grupo__sub { font-family: var(--font-sans); font-size: var(--fs-13); color: var(--fg-muted); margin: 0 0 var(--space-3); } .filas { border-top: 1px solid var(--border); } .fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--border); } .fila__nombre { font-family: var(--font-sans); font-size: var(--fs-16); font-weight: 600; color: var(--navy-800); } .fila__desc { display: block; font-weight: 400; font-size: var(--fs-14); line-height: 1.45; color: var(--fg-muted); margin-top: 2px; } .fila__etiqueta { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--leaf-500); border: 1px solid currentColor; vertical-align: middle; } .fila__precio { font-family: var(--font-sans); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy-800); white-space: nowrap; text-align: right; } .fila__precio small { display: block; font-weight: 400; font-size: var(--fs-12); color: var(--fg-subtle); } @media (min-width: 900px) { .filas { columns: 2; column-gap: var(--space-10); border-top: 0; } .fila { break-inside: avoid; } .fila:first-child { border-top: 1px solid var(--border); } } /* --- Cierre: la ultima pantalla resuelve (pedir), no se desvanece --------- */ .cierre { background: var(--navy-900); color: var(--cream-200); padding: var(--space-12) 0; } .cierre__inner { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4); display: grid; gap: var(--space-5); } .cierre__titulo { font-family: var(--font-display); font-variation-settings: "opsz" 96, "SOFT" 50; font-weight: 500; font-size: clamp(30px, 7vw, 48px); line-height: 1.02; letter-spacing: -0.028em; color: var(--cream-200); margin: 0; text-wrap: balance; max-width: 18ch; } .cierre__texto { font-family: var(--font-sans); font-size: var(--fs-16); color: rgba(245, 243, 240, 0.78); margin: 0; max-width: 46ch; } .cierre__acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); } @media (min-width: 901px) { .cierre__inner { padding: 0 var(--space-5); grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .cierre__acciones { grid-column: 2; grid-row: 1 / span 2; } } /* --- Motor de scroll-craft: contrato CSS de data-sc-in / data-sc-stagger. El motor (scrollcraft.js, sin editar) pone .sc-in una sola vez al entrar en vista, con transitionDelay escalonado en los hijos. Solo si hay JS. --- */ .js [data-sc-in], .js [data-sc-stagger] > * { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); } .js [data-sc-in].sc-in, .js [data-sc-stagger] > .sc-in, .sin-motor [data-sc-in], .sin-motor [data-sc-stagger] > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-sc-in], .js [data-sc-stagger] > * { opacity: 1; transform: none; transition: none; } .cabecera__actual span { animation: none; } }