Menú Completo
¿Qué te llevamos hoy?
Descubre nuestra selección de pastas frescas preparadas en rueda de queso Grana Padano, lasagnas artesanales y recomendaciones especiales del chef.
Domicilios Rapidos
05-07 min de preparación
Ingredientes Premium
══════════════════════════════════════════════════════════════
*/
/* ══════════════════════════════════════
FONDO GENERAL DE LA PÁGINA
══════════════════════════════════════ */
body,
main,
.flex.bg-background.min-h-screen {
background: #0f0c09 !important;
}
/* Contenedor principal */
.max-w-7xl.w-full.mx-auto {
background: #0f0c09 !important;
}
/* ══════════════════════════════════════
FUENTES PERSONALIZADAS
══════════════════════════════════════ */
@import url('https://fonts.cdnfonts.com/css/stop-lost');
/* ══════════════════════════════════════
TÍTULOS Y TIPOGRAFÍA
══════════════════════════════════════ */
.appTitle,
h1.text-2xl.font-bold,
h1.text-4xl.md\:text-5xl.font-bold,
h2.scroll-m-20,
h2.scroll-m-20.pb-2,
h3,
h3.scroll-m-20.text-2xl.font-bold,
h4.scroll-m-20.text-xl.font-bold.tracking-tight {
font-family: 'Stop Lost', sans-serif !important;
font-weight: 100 !important;
color: #fef3c7 !important;
}
.appTitle {
font-size: 1.9rem !important;
}
/* Subtítulos de categorías */
.component-category-name {
font-family: 'Stop Lost', sans-serif !important;
font-weight: 100 !important;
}
/* ══════════════════════════════════════
CONTENEDOR DE PRODUCTOS
══════════════════════════════════════ */
.space-y-8.orderProductsContainer,
.space-y-8.orderProductsContainer h3,
.space-y-8.orderProductsContainer h4 {
font-family: 'Stop Lost', sans-serif !important;
font-weight: lighter !important;
color: #fef3c7 !important;
}
/* Sección de productos */
.py-10.space-y-6,
.space-y-5 {
background: #0f0c09 !important;
}
/* ══════════════════════════════════════
CARDS DE PRODUCTOS (horizontal y vertical)
══════════════════════════════════════ */
/* Card horizontal (lista) - estructura completa */
a.rounded-lg.flex.border.bg-card.text-card-foreground.justify-between.h-40.items-stretch.flex-row,
a[class*='rounded-lg'][class*='flex'][class*='border'][class*='bg-card'] {
background-color: #14100c !important;
border: 1px solid rgba(120, 53, 15, 0.22) !important;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
}
a.rounded-lg.flex.border.bg-card.text-card-foreground.justify-between.h-40.items-stretch.flex-row:hover,
a[class*='rounded-lg'][class*='flex'][class*='border'][class*='bg-card']:hover {
border-color: rgba(245, 158, 11, 0.32) !important;
box-shadow: 0 18px 38px rgba(120, 53, 15, 0.18) !important;
transform: translateY(-2px) !important;
}
/* Card vertical (grid) */
.flex.flex-col.md\:aspect-square,
a.block.relative.overflow-hidden.rounded-lg {
background-color: #14100c !important;
border: 1px solid rgba(120, 53, 15, 0.22) !important;
border-radius: 12px !important;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
}
.flex.flex-col.md\:aspect-square:hover,
a.block.relative.overflow-hidden.rounded-lg:hover {
border-color: rgba(245, 158, 11, 0.32) !important;
box-shadow: 0 18px 38px rgba(120, 53, 15, 0.18) !important;
transform: translateY(-2px) !important;
}
/* Textos dentro de las cards */
.orderProductName,
.flex.flex-col.md\:aspect-square h3,
.flex.flex-col.md\:aspect-square p,
a.block h3,
a.block p {
color: #fef3c7 !important;
}
.flex.flex-col.md\:aspect-square p,
a.block p {
color: rgba(254, 243, 199, 0.6) !important;
}
/* Precios */
.flex.gap-x-2.text-sm.flex-row div,
.text-sm.font-bold,
[class*='price'] {
color: #f59e0b !important;
font-weight: 700 !important;
}
/* ══════════════════════════════════════
BARRA DE PEDIDO (Order Bar)
══════════════════════════════════════ */
div#orderBar,
.py-5.bg-plain.border-t.md\:rounded-br-lg.px-8.sticky.bottom-0.md\:relative,
[class*='orderBar'] {
background-color: #14100c !important;
border-color: rgba(120, 53, 15, 0.3) !important;
}
/* Botón principal de la barra de pedido */
button.justify-center.whitespace-nowrap.rounded-md.text-sm.transition-colors.bg-primary.text-primary-foreground.shadow.h-9.px-4.py-2.flex.flex-1.items-center.text-left,
button.bg-primary.text-primary-foreground,
button[class*='bg-primary'] {
background-color: #f59e0b !important;
color: #1a1510 !important;
font-family: 'Stop Lost', sans-serif !important;
font-weight: 100 !important;
font-size: 1.2rem !important;
border: none !important;
transition: background 0.2s, transform 0.15s !important;
}
button.justify-center.whitespace-nowrap.rounded-md.text-sm.transition-colors.bg-primary.text-primary-foreground.shadow.h-9.px-4.py-2.flex.flex-1.items-center.text-left:hover,
button.bg-primary.text-primary-foreground:hover,
button[class*='bg-primary']:hover {
background-color: #fbbf24 !important;
transform: scale(1.02) !important;
color: #1a1510 !important;
}
/* Texto en la barra de pedido */
div#orderBar *,
.py-5.bg-plain * {
color: #fef3c7 !important;
}
/* ══════════════════════════════════════
HERO / BANNER DE LA PÁGINA /PEDIR
══════════════════════════════════════ */
/* Componente "Start Ordering" - Hero principal */
.ct-startOrdering,
.webv3_startOrdering_container {
position: relative !important;
min-height: 400px !important;
background: #0f0c09 !important;
}
/* Imagen de fondo del hero */
.webv3_startOrdering_imageContainer,
.webv3_startOrdering_image {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
.webv3_startOrdering_image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
filter: brightness(0.7) !important;
}
/* Overlay oscuro sobre la imagen */
.webv3_startOrdering_imageBackdrop {
background: linear-gradient(
to bottom,
rgba(15, 12, 9, 0.75) 0%,
rgba(15, 12, 9, 0.85) 100%
) !important;
}
/* Contenedor de texto del hero */
.webv3_startOrdering_wordsContainer {
position: relative !important;
z-index: 10 !important;
padding: 80px 24px !important;
}
/* Título del hero */
.webv3_startOrdering_words,
h1.text-4xl.md\:text-5xl.font-bold {
font-family: 'Stop Lost', sans-serif !important;
font-weight: 100 !important;
color: #fef3c7 !important;
font-size: clamp(2.5rem, 6vw, 4rem) !important;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
margin-bottom: 24px !important;
}
/* Botón del hero */
.webv3_startOrdering_button,
a.webv3_startOrdering_button {
background: #f59e0b !important;
color: #1a1510 !important;
font-family: 'Stop Lost', sans-serif !important;
font-weight: 100 !important;
font-size: 1.3rem !important;
padding: 18px 40px !important;
border-radius: 12px !important;
border: none !important;
box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3) !important;
transition: all 0.3s ease !important;
}
.webv3_startOrdering_button:hover {
background: #fbbf24 !important;
transform: translateY(-2px) scale(1.05) !important;
box-shadow: 0 12px 32px rgba(245, 158, 11, 0.4) !important;
color: #1a1510 !important;
}
/* Responsive para hero */
@media (max-width: 768px) {
.webv3_startOrdering_container {
min-height: 300px !important;
}
.webv3_startOrdering_wordsContainer {
padding: 60px 20px !important;
}
.webv3_startOrdering_button {
font-size: 1.1rem !important;
padding: 14px 32px !important;
}
}
/* ══════════════════════════════════════
CATEGORÍAS (Featured Categories)
══════════════════════════════════════ */
.ct-featuredCategories {
background-color: #0f0c09 !important;
padding: 40px 0 !important;
}
.ct-featuredCategories .max-w-7xl {
background-color: transparent !important;
}
.ct-featuredCategories h2,
.ct-featuredCategories h3 {
font-family: 'Stop Lost', sans-serif !important;
font-weight: lighter !important;
color: #fef3c7 !important;
}
/* Cards de categorías */
.ct-featuredCategories a.block {
border: 1px solid rgba(120, 53, 15, 0.22) !important;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
}
.ct-featuredCategories a.block:hover {
border-color: rgba(245, 158, 11, 0.32) !important;
box-shadow: 0 18px 38px rgba(120, 53, 15, 0.18) !important;
transform: translateY(-2px) !important;
}
/* ══════════════════════════════════════
SLIDER / CAROUSEL (si existe)
══════════════════════════════════════ */
.ct-slider {
background: #0f0c09 !important;
}
.ct-slider img {
filter: brightness(0.75) !important;
}
/* Controles del slider */
.ct-slider button {
background: rgba(245, 158, 11, 0.2) !important;
border: 1px solid rgba(245, 158, 11, 0.4) !important;
color: #f59e0b !important;
}
.ct-slider button:hover {
background: rgba(245, 158, 11, 0.4) !important;
}
/* ══════════════════════════════════════
BARRA DE BÚSQUEDA Y NAVEGACIÓN SUPERIOR
══════════════════════════════════════ */
/* Barra de búsqueda */
input[type='search'],
input[placeholder*='Buscar'],
input[placeholder*='Search'] {
background: #1a1510 !important;
border: 1px solid rgba(120, 53, 15, 0.3) !important;
color: #fef3c7 !important;
padding: 12px 16px !important;
border-radius: 8px !important;
}
input[type='search']:focus {
border-color: #f59e0b !important;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
}
/* Icono de búsqueda */
button[aria-label*='search'],
button[aria-label*='Buscar'],
.lucide-search {
color: #f59e0b !important;
}
/* Navegación de categorías horizontal */
nav.flex.flex-row,
.flex.items-center.gap-5 {
background: transparent !important;
}
nav a,
.navbarLink {
color: rgba(254, 243, 199, 0.8) !important;
transition: color 0.2s !important;
}
nav a:hover,
.navbarLink:hover {
color: #f59e0b !important;
}
nav a.navbarLink.transition-colors.text-navbar-active {
color: #f59e0b !important;
font-weight: 600 !important;
}
/* ══════════════════════════════════════
BREADCRUMBS Y NAVEGACIÓN
══════════════════════════════════════ */
nav[aria-label='breadcrumb'],
nav[aria-label='breadcrumb'] ol,
nav[aria-label='breadcrumb'] li {
background: transparent !important;
}
nav[aria-label='breadcrumb'] a,
nav[aria-label='breadcrumb'] span {
color: rgba(254, 243, 199, 0.7) !important;
}
nav[aria-label='breadcrumb'] a:hover {
color: #f59e0b !important;
}
/* Separadores de breadcrumb */
nav[aria-label='breadcrumb'] svg {
color: rgba(254, 243, 199, 0.4) !important;
}
/* ══════════════════════════════════════
MODAL DE PRODUCTO (Product Dialog/Popup)
══════════════════════════════════════ */
[role='dialog'],
[role='dialog'] > div,
.fixed.inset-0.z-50 {
background: #14100c !important;
border: 1px solid rgba(120, 53, 15, 0.3) !important;
}
/* Overlay del modal */
[data-state='open'][class*='fixed'][class*='inset-0'] {
background: rgba(15, 12, 9, 0.85) !important;
}
[role='dialog'] h2,
[role='dialog'] h3,
[role='dialog'] h4,
[role='dialog'] p,
[role='dialog'] label,
[role='dialog'] span {
color: #fef3c7 !important;
}
[role='dialog'] p {
color: rgba(254, 243, 199, 0.7) !important;
}
/* Botón de submit en modal */
[role='dialog'] button[type='submit'],
[role='dialog'] button.bg-primary {
background-color: #f59e0b !important;
color: #1a1510 !important;
font-weight: 700 !important;
border: none !important;
}
[role='dialog'] button[type='submit']:hover,
[role='dialog'] button.bg-primary:hover {
background-color: #fbbf24 !important;
color: #1a1510 !important;
}
/* Botón de cerrar modal */
[role='dialog'] button[aria-label*='Close'],
[role='dialog'] button[aria-label*='Cerrar'] {
color: rgba(254, 243, 199, 0.7) !important;
}
[role='dialog'] button[aria-label*='Close']:hover,
[role='dialog'] button[aria-label*='Cerrar']:hover {
color: #f59e0b !important;
}
/* ══════════════════════════════════════
INPUTS Y CONTROLES
══════════════════════════════════════ */
input,
textarea,
select,
input[type='text'],
input[type='number'],
input[type='email'],
input[type='tel'] {
background: #1a1510 !important;
border: 1px solid rgba(120, 53, 15, 0.3) !important;
color: #fef3c7 !important;
}
input::placeholder,
textarea::placeholder {
color: rgba(254, 243, 199, 0.4) !important;
}
input:focus,
textarea:focus,
select:focus {
border-color: #f59e0b !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
}
/* Botones de incremento/decremento */
button[aria-label*='Increment'],
button[aria-label*='Decrement'],
button[aria-label*='Aumentar'],
button[aria-label*='Disminuir'] {
background: rgba(245, 158, 11, 0.1) !important;
border: 1px solid rgba(245, 158, 11, 0.3) !important;
color: #f59e0b !important;
}
button[aria-label*='Increment']:hover,
button[aria-label*='Decrement']:hover,
button[aria-label*='Aumentar']:hover,
button[aria-label*='Disminuir']:hover {
background: rgba(245, 158, 11, 0.2) !important;
}
/* ══════════════════════════════════════
BADGES Y TAGS
══════════════════════════════════════ */
.badge,
[class*='badge'],
span.inline-flex.items-center.rounded-full {
background: rgba(245, 158, 11, 0.15) !important;
color: #f59e0b !important;
border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
/* ══════════════════════════════════════
BOTONES SECUNDARIOS Y LINKS
══════════════════════════════════════ */
button.text-primary,
a.text-primary,
button[class*='text-primary'],
a[class*='text-primary'] {
color: #f59e0b !important;
}
button.text-primary:hover,
a.text-primary:hover {
color: #fbbf24 !important;
}
/* Botones outline/ghost */
button.border.bg-transparent,
button[class*='border'][class*='bg-transparent'] {
border-color: rgba(245, 158, 11, 0.3) !important;
color: #f59e0b !important;
background: transparent !important;
}
button.border.bg-transparent:hover,
button[class*='border'][class*='bg-transparent']:hover {
background: rgba(245, 158, 11, 0.1) !important;
border-color: rgba(245, 158, 11, 0.5) !important;
}
/* ══════════════════════════════════════
SCROLLBAR PERSONALIZADO
══════════════════════════════════════ */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #14100c;
}
::-webkit-scrollbar-thumb {
background: rgba(245, 158, 11, 0.3);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(245, 158, 11, 0.5);
}
/* ══════════════════════════════════════
TABS Y NAVEGACIÓN DE PRODUCTOS
══════════════════════════════════════ */
[role='tablist'],
.inline-flex.items-center.justify-center {
background: #14100c !important;
border: 1px solid rgba(120, 53, 15, 0.22) !important;
}
[role='tab'],
button[role='tab'] {
color: rgba(254, 243, 199, 0.6) !important;
}
[role='tab'][data-state='active'],
button[role='tab'][data-state='active'] {
background: rgba(245, 158, 11, 0.15) !important;
color: #f59e0b !important;
}
/* ══════════════════════════════════════
SKELETON LOADERS
══════════════════════════════════════ */
.animate-pulse,
[class*='skeleton'] {
background: rgba(120, 53, 15, 0.15) !important;
}
/* ══════════════════════════════════════
POPOVER Y TOOLTIPS
══════════════════════════════════════ */
[role='tooltip'],
.popover-content {
background: #14100c !important;
border: 1px solid rgba(120, 53, 15, 0.3) !important;
color: #fef3c7 !important;
}
/* ══════════════════════════════════════
SEPARADORES
══════════════════════════════════════ */
hr,
.border-t,
.border-b,
[class*='border-t'],
[class*='border-b'] {
border-color: rgba(120, 53, 15, 0.22) !important;
}
/* ══════════════════════════════════════
TEXTOS GENERALES
══════════════════════════════════════ */
p,
span,
div {
color: rgba(254, 243, 199, 0.85);
}
/* Textos secundarios/muted */
.text-muted-foreground,
[class*='text-muted'] {
color: rgba(254, 243, 199, 0.5) !important;
}
/* ══════════════════════════════════════
AJUSTES RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 768px) {
.appTitle {
font-size: 1.5rem !important;
}
button.bg-primary.text-primary-foreground {
font-size: 1rem !important;
}
}
