/* ===================================================================== DOMIPANCHO · TEMA CLARO PROFESIONAL (dp-theme.css) Cárgalo SIEMPRE de ÚLTIMO en el para que gane la cascada. Redefine los tokens de marca (derivados del logo: gato dorado + gorra roja) y afina el lienzo, tipografía, sombras y ritmo de secciones. ===================================================================== */ :root { /* ---- Paleta de marca (del logo) ---- */ --dp-red: #f0402e; /* gorra roja → acción principal */ --dp-red-deep: #d42c1b; --dp-red-soft: #ff6a58; --dp-gold: #f9a825; /* pelaje dorado → acento */ --dp-gold-soft: #ffbe45; --dp-brand: linear-gradient(135deg, #f0402e 0%, #fb8c00 55%, #f9a825 100%); --dp-brand-soft: linear-gradient(135deg, rgba(240,64,46,.10) 0%, rgba(249,168,37,.10) 100%); /* ---- Neutros / lienzo claro ---- */ --dp-ink: #16161f; /* titulares */ --dp-ink-soft: #454552; /* cuerpo */ --dp-muted: #8a8a99; /* captions */ --dp-line: #ecedf1; /* bordes fino */ --dp-line-2: #f3f4f7; --dp-canvas: #f4f5f8; /* fondo de página */ --dp-surface: #ffffff; /* tarjetas */ --dp-surface-2: #fbfbfd; /* ---- Semánticos ---- */ --dp-open: #16a34a; --dp-closed: #dc2626; /* ---- Sombras (suaves, premium) ---- */ --dp-shadow-xs: 0 1px 2px rgba(16,16,31,.05); --dp-shadow-sm: 0 1px 2px rgba(16,16,31,.04), 0 4px 12px rgba(16,16,31,.05); --dp-shadow-md: 0 6px 20px rgba(16,16,31,.07); --dp-shadow-lg: 0 16px 44px rgba(16,16,31,.11); --dp-shadow-brand: 0 10px 30px rgba(240,64,46,.22); /* ---- Radios ---- */ --dp-r-sm: 12px; --dp-r: 18px; --dp-r-lg: 24px; /* ========= Mapeo de variables heredadas ========= Muchos CSS existentes usan estos nombres. Al redefinirlos aquí (último archivo) toda la app hereda la nueva paleta sin tocar cada componente. */ --primary-color: var(--dp-red); --secondary-color: var(--dp-gold); --hover-color: var(--dp-red-deep); --success-color: var(--dp-open); --text-primary: var(--dp-ink); --text-secondary: var(--dp-ink-soft); --border-color: var(--dp-line); --gradient-primary: var(--dp-brand); --gradient-hover: linear-gradient(135deg, #d42c1b 0%, #e0820a 100%); --dark-bg: #16161f; --card-bg: #ffffff; --shadow-sm: var(--dp-shadow-sm); --shadow-md: var(--dp-shadow-md); --shadow-lg: var(--dp-shadow-lg); --shadow-xl: var(--dp-shadow-lg); --shadow-light: rgba(16,16,31,.06); --shadow-medium: rgba(16,16,31,.10); --shadow-strong: rgba(16,16,31,.16); --glass-bg: rgba(255,255,255,.85); --glass-border: rgba(16,16,31,.06); } /* ===================================================================== LIENZO ===================================================================== */ html { -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Fondo claro con un halo cálido casi imperceptible detrás del hero */ background: radial-gradient(1100px 520px at 50% -240px, rgba(249,168,37,.10), transparent 62%), radial-gradient(900px 480px at 92% -160px, rgba(240,64,46,.06), transparent 60%), var(--dp-canvas) !important; background-attachment: fixed; color: var(--dp-ink-soft); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Tipografía de titulares para toda la app */ h1, h2, h3, .titulo-recomendados, .titulo-secundario, .titulo-restaurantes-populares, .titulo-productos-mas-vendidos, .header-text h2, .dp-hero-title { font-family: 'Sora', 'Inter', system-ui, sans-serif; letter-spacing: -0.02em; } /* Ancho de contenido consistente y aireado */ main { max-width: 1200px; margin-inline: auto; } /* ===================================================================== TÍTULO "MÁS SITIOS PARA EXPLORAR" → eyebrow + título elegante ===================================================================== */ .titulo-secundario { position: relative; max-width: calc(100% - 2rem); margin: 2.2rem auto 1.1rem !important; padding-left: 2px; font-size: 1.5rem !important; font-weight: 800 !important; color: var(--dp-ink) !important; display: flex; align-items: center; gap: .6rem; } .titulo-secundario::before { content: ''; width: 22px; height: 22px; border-radius: 7px; background: var(--dp-brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/70% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/70% no-repeat; flex-shrink: 0; } @media (max-width: 768px){ .titulo-secundario{ font-size: 1.25rem !important; margin: 1.6rem auto .9rem !important; } } /* Rejilla de "más sitios" un poco más aireada en desktop */ .grid-restaurantes { max-width: calc(100% - 2rem); margin-inline: auto; } /* ===================================================================== SECCIÓN "ÚNETE A DOMIPANCHO" (enlaces rápidos) → limpia y clara ===================================================================== */ .enlaces-rapidos-section{ background: var(--dp-surface) !important; border: 1px solid var(--dp-line) !important; box-shadow: var(--dp-shadow-md) !important; border-radius: var(--dp-r-lg) !important; } .enlaces-rapidos-section::before{ background: var(--dp-brand) !important; } .header-icon{ background: var(--dp-brand) !important; box-shadow: var(--dp-shadow-brand) !important; animation: none !important; } .header-text h2{ color: var(--dp-ink) !important; font-weight: 800 !important; } .header-text p{ color: var(--dp-muted) !important; } .enlace-card{ border-radius: var(--dp-r) !important; } /* La tarjeta de repartidor pasa de azul a dorado (marca) */ .repartidor-card{ border-color: rgba(249,168,37,.22) !important; background: linear-gradient(135deg,#fff, rgba(249,168,37,.04)) !important; } .repartidor-card:hover{ border-color: var(--dp-gold) !important; box-shadow: 0 12px 30px rgba(249,168,37,.18) !important; } .repartidor-card .card-icon, .repartidor-card .btn-enlace{ background: linear-gradient(135deg,#f9a825,#f57f17) !important; } .repartidor-card .btn-enlace:hover{ background: linear-gradient(135deg,#f57f17,#e65100) !important; } .link-legal:hover{ color: var(--dp-red) !important; border-color: rgba(240,64,46,.28) !important; background: rgba(240,64,46,.05) !important; } /* ===================================================================== BADGE DE CIUDAD (header) → pill clara + icono en círculo con degradado de marca. Se define por completo aquí porque este archivo carga al final (gana la cascada). ===================================================================== */ .ciudad-seleccionada-badge{ display: inline-flex !important; align-items: center !important; gap: 8px !important; background: var(--dp-surface) !important; border: 1.5px solid var(--dp-line) !important; color: var(--dp-ink) !important; padding: 5px 14px 5px 5px !important; border-radius: 50px !important; font-weight: 700 !important; box-shadow: var(--dp-shadow-sm) !important; transition: box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s, transform .3s !important; } .ciudad-seleccionada-badge:hover{ border-color: transparent !important; box-shadow: var(--dp-shadow-brand) !important; transform: translateY(-1px); } .ciudad-seleccionada-badge:active{ transform: translateY(0) scale(.98); } .ciudad-seleccionada-badge .badge-icon{ display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; background: var(--dp-brand) !important; color: #fff !important; flex-shrink: 0; } .ciudad-seleccionada-badge .badge-chevron{ color: var(--dp-muted) !important; transition: transform .3s, color .3s; } .ciudad-seleccionada-badge:hover .badge-chevron{ color: var(--dp-red) !important; transform: translateY(1px); } /* ===================================================================== FLECHAS / SCROLL BUTTONS → estilo limpio y consistente ===================================================================== */ .scroll-btn{ background: var(--dp-surface) !important; border: 1px solid var(--dp-line) !important; color: var(--dp-red) !important; box-shadow: var(--dp-shadow-sm) !important; } .scroll-btn:hover{ background: var(--dp-brand) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--dp-shadow-brand) !important; } /* ===================================================================== ACCESIBILIDAD ===================================================================== */ :where(a, button, input, [tabindex]):focus-visible{ outline: 2px solid var(--dp-red); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ===================================================================== AJUSTES v2 — secciones "más pedidos/vendidos", footer (el morado #667eea original se reemplaza por la marca rojo→dorado) ===================================================================== */ /* ===================================================================== "LOS MÁS PEDIDOS" (restaurantes-populares) ===================================================================== */ .restaurantes-populares-section::after{ background: radial-gradient(circle, rgba(249,168,37,.05) 0%, transparent 70%) !important; } .restaurante-popular-imagen::after{ background: linear-gradient(to top, rgba(16,16,31,.22), transparent) !important; } .restaurante-popular-imagen .imagen-fallback{ background: linear-gradient(135deg, rgba(240,64,46,.08) 0%, rgba(249,168,37,.10) 100%) !important; } .restaurante-popular-imagen .imagen-fallback svg{ color: #cbd0d8 !important; } .restaurante-popular-logo{ box-shadow: 0 4px 14px rgba(16,16,31,.14) !important; } .restaurante-popular-card:hover .restaurante-popular-logo{ box-shadow: 0 6px 20px rgba(240,64,46,.28) !important; } .restaurante-popular-logo .logo-fallback{ background: linear-gradient(135deg, rgba(240,64,46,.10), rgba(249,168,37,.12)) !important; } .restaurante-popular-logo .logo-fallback svg{ color: var(--dp-red) !important; opacity: .7; } .restaurante-popular-card:hover{ border-color: rgba(240,64,46,.30) !important; } .restaurantes-populares-container .scroll-btn{ border: 1px solid #ecedf1 !important; color: var(--dp-red) !important; box-shadow: 0 4px 16px rgba(16,16,31,.08) !important; } .restaurantes-populares-container .scroll-btn::before{ background: var(--dp-brand) !important; } .restaurantes-populares-container .scroll-btn:hover{ border-color: transparent !important; color: #fff !important; box-shadow: 0 8px 22px rgba(240,64,46,.28) !important; } /* ===================================================================== "CATEGORÍAS VISUALES" + "MÁS VENDIDOS" ===================================================================== */ .categorias-visuales-section::after, .productos-mas-vendidos-section::after{ background: radial-gradient(circle, rgba(249,168,37,.05) 0%, transparent 70%) !important; } .categoria-visual-card:hover{ border-color: rgba(240,64,46,.30) !important; } .categoria-icono{ filter: drop-shadow(0 8px 20px rgba(240,64,46,.28)) !important; } .categoria-icono .imagen-fallback, .categoria-icono .logo-fallback{ background: linear-gradient(135deg, rgba(240,64,46,.10), rgba(249,168,37,.12)) !important; } .categoria-contador{ border: 1.5px solid rgba(240,64,46,.20) !important; color: var(--dp-red) !important; } .categoria-visual-card:hover .categoria-contador{ background: linear-gradient(135deg, rgba(240,64,46,.14), rgba(249,168,37,.16)) !important; border-color: rgba(240,64,46,.40) !important; } .categorias-visuales-container .scroll-btn{ border: 2px solid #ecedf1 !important; color: var(--dp-red) !important; } .categorias-visuales-container .scroll-btn::before{ background: var(--dp-brand) !important; } .categorias-visuales-container .scroll-btn:hover{ border-color: transparent !important; color: #fff !important; box-shadow: 0 8px 24px rgba(240,64,46,.28) !important; } /* Ranking (número) por defecto → marca; medallas 1/2/3 se conservan */ .producto-ranking{ background: var(--dp-brand) !important; } .producto-imagen-container::after{ background: linear-gradient(to top, rgba(16,16,31,.20), transparent) !important; } .ventas-badge.badge-nuevo{ background: linear-gradient(135deg, rgba(240,64,46,.92), rgba(251,140,0,.92)) !important; box-shadow: 0 3px 10px rgba(240,64,46,.32) !important; } /* ===================================================================== FIX "LOS MÁS PEDIDOS DE LA SEMANA" — colores limpios de marca (este archivo carga de último → gana la cascada). Antes el precio y el botón usaban un degradado rosa→coral y el hover era VERDE, chocando con el rojo→dorado de la marca. Aquí se unifica todo. ===================================================================== */ /* Borde superior de la sección → marca */ .productos-mas-vendidos-section::before{ background: var(--dp-brand) !important; animation: none !important; } /* Ícono de fuego del título → marca */ .productos-icon::before{ background: var(--dp-brand) !important; filter: drop-shadow(0 4px 12px rgba(240,64,46,.28)) !important; } /* Hover de tarjeta: de verde → rojo de marca (coherente) */ .producto-mas-vendido-card:hover{ border-color: rgba(240,64,46,.35) !important; box-shadow: 0 14px 34px rgba(240,64,46,.16) !important; } .producto-mas-vendido-card::before{ background: var(--dp-brand) !important; } /* Ranking por defecto → marca (medallas 1/2/3 se conservan) */ .producto-ranking{ background: var(--dp-brand) !important; } /* Overlay de la imagen → neutro (no negro puro) */ .producto-imagen-container::after{ background: linear-gradient(to top, rgba(16,16,31,.28), transparent) !important; } /* Badge "Popular"/ventas → marca sólida y legible */ .ventas-badge.badge-nuevo, .ventas-badge.badge-vendidos{ background: linear-gradient(135deg, rgba(240,64,46,.94), rgba(251,140,0,.94)) !important; box-shadow: 0 3px 10px rgba(240,64,46,.30) !important; border-color: rgba(255,255,255,.35) !important; } /* Precio → tinta oscura sólida (alto contraste, sin degradado "lavado") */ .producto-mas-vendido-precio{ background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: var(--dp-ink) !important; font-weight: 900 !important; letter-spacing: -.02em; } /* Botón "Pedir" → degradado de marca (rojo→dorado), texto blanco */ .btn-agregar-producto-popular{ background: var(--dp-brand) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(240,64,46,.28) !important; } .btn-agregar-producto-popular:hover{ background: linear-gradient(135deg,#d42c1b 0%, #e0820a 100%) !important; box-shadow: 0 8px 22px rgba(240,64,46,.36) !important; } /* Logo del restaurante en la tarjeta → borde neutro */ .restaurante-logo-small{ border-color: var(--dp-line) !important; } /* Flechas del carrusel de más vendidos → marca */ .productos-mas-vendidos-section .scroll-btn{ color: var(--dp-red) !important; border: 1px solid var(--dp-line) !important; } .productos-mas-vendidos-section .scroll-btn:hover{ background: var(--dp-brand) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--dp-shadow-brand) !important; } /* El footer se controla por completo en footer.css (fuente única). */