/* ========================================================================== MIMONCLOVA.COM - HOJA DE ESTILOS PRINCIPAL ========================================================================== Un solo archivo controla el diseño de TODO el sitio. Cambiar un color o tamaño aquí lo actualiza en todas las páginas. Páginas "hoja" (ficha de un doctor/restaurante/negocio) usan un subconjunto reducido de este mismo CSS (sin exigir clases nuevas): header mínimo (solo .logo-link, sin .main-nav) y footer sin .footer-grid completo. Ver documento de estrategia para más detalle. ========================================================================== */ /* -------------------------------------------------------------------------- 1. VARIABLES DE MARCA -------------------------------------------------------------------------- */ :root { /* Colores de marca (extraídos del logo 2026) */ --color-navy: #0028A0; /* azul marino - encabezados, header, énfasis */ --color-blue: #3070F0; /* azul brillante - acentos secundarios, links */ --color-orange: #F87800; /* naranja - botones, CTA, etiquetas destacadas */ --color-orange-dark: #D96400; /* naranja oscuro - hover de botones */ /* Celeste tenue - cajas informativas (especialidad/tratamiento) */ --color-blue-tint: #E6ECFB; --color-blue-tint-text: #0C447C; /* Colores neutros */ --color-bg: #F7F8FA; /* fondo general, gris cálido muy claro */ --color-white: #FFFFFF; --color-text: #23262B; /* texto principal */ --color-text-light: #6B6F76; /* texto secundario / descripciones */ --color-border: #E2E5EA; /* líneas divisorias sutiles */ /* Tipografía (Google Fonts, cargada en el de cada página) */ --font-heading: 'Poppins', Arial, sans-serif; --font-body: 'Inter', Arial, sans-serif; /* Medidas reutilizables */ --max-width: 1120px; --radius: 10px; --radius-sm: 6px; } /* -------------------------------------------------------------------------- 2. RESET BÁSICO -------------------------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--color-text); background-color: var(--color-white); line-height: 1.6; font-size: 16px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-blue); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { list-style: none; } /* -------------------------------------------------------------------------- 3. TIPOGRAFÍA GENERAL -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-navy); line-height: 1.25; font-weight: 600; } h1 { font-size: 2.3rem; } h2 { font-size: 1.7rem; margin-bottom: 1rem; } h3 { font-size: 1.25rem; margin-bottom: 0.5rem; } p { margin-bottom: 1rem; color: var(--color-text); } .text-light { color: var(--color-text-light); } .eyebrow { display: inline-block; font-family: var(--font-heading); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-orange); margin-bottom: 0.75rem; } /* -------------------------------------------------------------------------- 4. CONTENEDOR Y SECCIONES -------------------------------------------------------------------------- */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } .section { padding: 56px 0; } /* -------------------------------------------------------------------------- 17. TARJETAS DE PLANES (landing de "anuncia tu restaurante") -------------------------------------------------------------------------- */ .plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; max-width: 900px; margin: 0 auto; } @media (max-width: 720px) { .plan-grid { grid-template-columns: 1fr; } } .plan-card { background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: 12px; padding: 32px 28px; text-align: left; position: relative; } .plan-card.featured { border: 2px solid var(--color-orange); } .plan-featured-tag { position: absolute; top: -13px; left: 28px; background-color: var(--color-orange); color: var(--color-white); font-family: var(--font-heading); font-weight: 600; font-size: 0.76rem; padding: 4px 12px; border-radius: 20px; } .plan-name { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; margin-bottom: 6px; } .plan-price { font-family: var(--font-heading); font-weight: 700; font-size: 1.9rem; color: var(--color-orange); margin-bottom: 2px; } .plan-price span { font-size: 0.9rem; font-weight: 500; color: var(--color-text-light); } .plan-renewal { font-size: 0.82rem; color: var(--color-text-light); margin-bottom: 18px; } .plan-features { list-style: none; margin: 0; padding: 0; } .plan-features li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; line-height: 1.4; } .plan-features li:last-child { border-bottom: none; } .plan-features i { color: var(--color-orange); font-size: 1.05rem; flex-shrink: 0; margin-top: 2px; } .section-alt { background-color: var(--color-bg); border-top: 1px solid var(--color-border); } .text-center { text-align: center; } .prose { max-width: 700px; margin: 0 auto; } .prose p:last-child { margin-bottom: 0; } .section-title { text-align: center; max-width: 640px; margin: 0 auto 2.5rem auto; } .section-title h2 { margin-bottom: 0.5rem; } /* -------------------------------------------------------------------------- 5. ENCABEZADO / NAVEGACIÓN -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--color-white); border-bottom: 1px solid var(--color-border); } .header-inner { max-width: var(--max-width); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; } .logo-link { display: flex; align-items: center; } .logo-link img { height: 44px; width: auto; } /* Menú principal (escritorio) */ .main-nav { display: flex; align-items: center; gap: 28px; } .main-nav a { color: var(--color-navy); font-family: var(--font-heading); font-weight: 500; font-size: 0.95rem; text-decoration: none; } .main-nav a:hover { color: var(--color-orange); } .nav-extra { display: none; } /* Botón de menú hamburguesa (solo móvil) */ .menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; background: none; border: none; cursor: pointer; padding: 0; } .menu-toggle span { display: block; width: 100%; height: 2px; background-color: var(--color-navy); border-radius: 2px; } /* -------------------------------------------------------------------------- 6. HERO -------------------------------------------------------------------------- */ .hero { background-color: var(--color-navy); color: var(--color-white); padding: 64px 0 72px; text-align: center; } .hero .eyebrow { color: #7FA8F5; } .hero h1 { color: var(--color-white); max-width: 720px; margin: 0 auto 1.1rem; } .hero p { color: rgba(255, 255, 255, 0.85); font-size: 1.1rem; max-width: 560px; margin: 0 auto; } /* -------------------------------------------------------------------------- 7. TARJETAS DE SECCIÓN (Restaurantes / Médico / Cine) -------------------------------------------------------------------------- */ .pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: -40px; } .pillar-card { background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: 12px; padding: 32px 26px; text-decoration: none; color: var(--color-text); display: block; transition: border-color 0.15s ease; } .pillar-card:hover { border-color: var(--color-orange); text-decoration: none; } .pillar-icon { width: 52px; height: 52px; border-radius: 50%; background-color: #E6ECFB; color: var(--color-navy); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px; } .pillar-card h3 { margin-bottom: 8px; } .pillar-card p { color: var(--color-text-light); font-size: 0.95rem; margin-bottom: 14px; } .pillar-link { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; color: var(--color-orange); } /* -------------------------------------------------------------------------- 8. FRANJA DE UTILIDAD (enlaces secundarios de bajo mantenimiento) -------------------------------------------------------------------------- */ .utility-bar { background-color: var(--color-bg); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 20px 0; } .utility-bar .container { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; } .utility-bar p { margin: 0; color: var(--color-text-light); font-size: 0.95rem; } .utility-bar a { font-family: var(--font-heading); font-weight: 600; color: var(--color-navy); } /* -------------------------------------------------------------------------- 9. BOTONES -------------------------------------------------------------------------- */ .btn { display: inline-block; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; padding: 13px 26px; border-radius: var(--radius-sm); text-decoration: none !important; border: 2px solid transparent; cursor: pointer; } .btn-primary { background-color: var(--color-orange); color: var(--color-white) !important; } .btn-primary:hover { background-color: var(--color-orange-dark); } /* -------------------------------------------------------------------------- 10. PIE DE PÁGINA (dos niveles: universal y home — ver documento maestro) -------------------------------------------------------------------------- */ .site-footer { background-color: var(--color-navy); color: rgba(255, 255, 255, 0.85); padding: 44px 0 22px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin-bottom: 28px; } .footer-brand img { height: 30px; margin-bottom: 12px; } .footer-brand p { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; max-width: 320px; } .site-footer h4 { color: var(--color-white); font-family: var(--font-heading); font-size: 0.95rem; margin-bottom: 12px; } .site-footer h4 a { color: inherit; font: inherit; display: inline; padding: 0; } .site-footer a { color: rgba(255, 255, 255, 0.75); display: block; padding: 4px 0; font-size: 0.92rem; } .site-footer a:hover { color: var(--color-white); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 18px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); text-align: center; } .footer-bottom a { display: inline; color: rgba(255, 255, 255, 0.7); } /* -------------------------------------------------------------------------- 11. RESPONSIVE / MÓVIL -------------------------------------------------------------------------- */ @media (max-width: 860px) { h1 { font-size: 1.8rem; } h2 { font-size: 1.4rem; } .pillar-grid { grid-template-columns: 1fr; margin-top: -30px; } .footer-grid { grid-template-columns: 1fr; gap: 22px; } .menu-toggle { display: flex; } .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background-color: var(--color-white); flex-direction: column; align-items: stretch; gap: 0; border-bottom: 1px solid var(--color-border); box-shadow: 0 8px 20px rgba(0, 40, 160, 0.08); } .main-nav.is-open { display: flex; } .nav-extra { display: block; } .main-nav a { padding: 14px 24px; border-bottom: 1px solid var(--color-border); } .hero { padding: 48px 0 60px; } } /* -------------------------------------------------------------------------- 11B. NAV - ESTADO ACTIVO (indica en qué sección está el visitante) -------------------------------------------------------------------------- */ .main-nav a.active { color: var(--color-orange); font-weight: 600; } /* -------------------------------------------------------------------------- 12. ENCABEZADO DE PÁGINA (secciones internas, más ligero que el hero del home) -------------------------------------------------------------------------- */ .page-header { background-color: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: 40px 0 32px; } .page-header h1 { margin-bottom: 0.4rem; } .page-header p { color: var(--color-text-light); max-width: 620px; margin-bottom: 0; } /* -------------------------------------------------------------------------- 13. BUSCADOR SIMPLE (filtra listados por nombre/categoría, sin backend) -------------------------------------------------------------------------- */ .search-box { margin: 28px 0 8px; } .search-box input { width: 100%; max-width: 420px; padding: 13px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 1rem; color: var(--color-text); } .search-box input:focus { outline: 2px solid var(--color-blue); outline-offset: 1px; } .search-count { font-size: 0.85rem; color: var(--color-text-light); margin-bottom: 20px; } /* -------------------------------------------------------------------------- 14. LISTADO DE NEGOCIOS (restaurantes, y reutilizable para otros directorios) -------------------------------------------------------------------------- */ .listing { border-top: 1px solid var(--color-border); } .restaurant-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--color-border); text-decoration: none !important; color: var(--color-text); } .restaurant-row.has-page { cursor: pointer; } .restaurant-row.has-page:hover { background-color: var(--color-bg); } .restaurant-logo-slot { width: 80px; height: 65px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .restaurant-logo-slot.has-logo { padding: 1px; } .restaurant-logo-slot img { max-width: 100%; max-height: 100%; object-fit: contain; } .restaurant-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .restaurant-name { font-family: var(--font-heading); font-weight: 600; color: var(--color-navy); font-size: 1.02rem; } .restaurant-category { font-size: 0.85rem; color: var(--color-text-light); } .restaurant-phone { font-size: 0.88rem; color: var(--color-text-light); white-space: nowrap; } .restaurant-arrow { font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; color: var(--color-orange); white-space: nowrap; flex-shrink: 0; } /* -------------------------------------------------------------------------- 15. PIE DE PÁGINA SIMPLIFICADO (páginas que NO son el home) -------------------------------------------------------------------------- */ .footer-simple { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; } .footer-simple a { color: rgba(255, 255, 255, 0.8); font-size: 0.92rem; } .footer-simple a:hover { color: var(--color-white); } /* -------------------------------------------------------------------------- 25. ETIQUETAS DE CARACTERÍSTICAS Y FILTROS (directorios inteligentes) -------------------------------------------------------------------------- */ .restaurant-tags { display: flex; align-items: center; gap: 8px; margin-top: 3px; } .restaurant-tags img { display: block; } .restaurant-tags .icon-vegano { width: 15px; height: 15px; } .restaurant-tags .icon-bar { width: 18px; height: 18px; } .restaurant-tags .icon-juegos { width: 23px; height: 23px; } .filter-label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-light); margin-bottom: 8px; } .filter-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .filter-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; border-radius: 22px; border: 1px solid var(--color-border); background-color: var(--color-white); color: var(--color-navy); cursor: pointer; } .filter-chip img { display: block; } .filter-chip .icon-vegano { width: 18px; height: 18px; } .filter-chip .icon-bar { width: 22px; height: 22px; } .filter-chip .icon-juegos { width: 27px; height: 27px; } .filter-chip.active { background-color: var(--color-orange); border-color: var(--color-orange); color: var(--color-white); } .filter-chip.active img { filter: brightness(0) invert(1); } /* -------------------------------------------------------------------------- 16. RESPONSIVE ADICIONAL -------------------------------------------------------------------------- */ @media (max-width: 600px) { .restaurant-row { flex-wrap: wrap; } .restaurant-phone { order: 3; width: 100%; font-size: 0.82rem; white-space: normal; } .restaurant-arrow { order: 2; } .leaf-header .header-inner { flex-direction: column; align-items: flex-start; gap: 8px; } } /* -------------------------------------------------------------------------- 17. HEADER MÍNIMO (páginas hoja: ficha de restaurante/doctor/negocio) -------------------------------------------------------------------------- */ .leaf-header { background-color: var(--color-white); border-bottom: 1px solid var(--color-border); padding: 14px 0; } .leaf-header .header-inner { display: flex; align-items: center; justify-content: space-between; } .leaf-header .logo-link img { height: 36px; width: auto; } .back-link { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; color: var(--color-navy); } .back-link:hover { color: var(--color-orange); text-decoration: none; } /* -------------------------------------------------------------------------- 18. IDENTIDAD DEL NEGOCIO (encabezado de la ficha) -------------------------------------------------------------------------- */ .business-header { text-align: center; padding: 36px 0 28px; border-bottom: 1px solid var(--color-border); margin-bottom: 32px; background-color: var(--color-bg); } .business-logo { max-width: 220px; margin: 0 auto 16px; border-radius: 8px; overflow: hidden; } .business-header h1 { margin-bottom: 4px; } .business-tagline { color: var(--color-text-light); font-size: 0.92rem; margin-bottom: 18px; } .business-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .action-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; padding: 10px 18px; border-radius: var(--radius-sm); text-decoration: none !important; } .action-btn-primary { background-color: var(--color-orange); color: var(--color-white) !important; } .action-btn-primary:hover { background-color: var(--color-orange-dark); } .action-btn-secondary { background-color: var(--color-white); border: 1px solid var(--color-border); color: var(--color-navy) !important; } .action-btn-secondary:hover { border-color: var(--color-navy); } .business-info-box { background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px; padding: 16px 20px; max-width: 380px; margin: 0 auto; text-align: left; } .business-info-box p { font-size: 0.9rem; color: var(--color-text); margin-bottom: 8px; display: flex; gap: 8px; align-items: flex-start; } .business-info-box p:last-child { margin-bottom: 0; } .business-info-box i { color: var(--color-text-light); font-size: 1rem; flex-shrink: 0; margin-top: 2px; } .business-social { display: flex; justify-content: center; gap: 16px; margin-top: 16px; } .business-social a { color: var(--color-text-light); font-size: 1.3rem; } .business-social a:hover { color: var(--color-navy); } /* -------------------------------------------------------------------------- 21. GALERÍA DE PLATILLOS DESTACADOS (fotos reales de platillos) -------------------------------------------------------------------------- */ .dish-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; } .dish-card { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background-color: var(--color-white); } .dish-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .dish-card-caption { padding: 12px 14px; } @media (max-width: 700px) { .dish-gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .dish-gallery { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 22. INFO ADICIONAL AL FINAL (promociones, programas de cliente, avisos) -------------------------------------------------------------------------- */ .extra-info { background-color: var(--color-bg); border-top: 1px solid var(--color-border); padding: 32px 0; margin-top: 24px; } .extra-info h3 { margin-bottom: 8px; } .extra-info-block { margin-bottom: 24px; } .extra-info-block:last-child { margin-bottom: 0; } .extra-info-block p { font-size: 0.9rem; color: var(--color-text-light); } .cta-link { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; color: var(--color-orange); } /* -------------------------------------------------------------------------- 24. SECCIONES DE MENÚ PLEGABLES (details/summary nativo) -------------------------------------------------------------------------- */ .menu-toggle-all { display: block; margin: 0 0 24px; font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; color: var(--color-navy); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 18px; cursor: pointer; } .menu-section summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; padding: 4px 0; } .menu-section summary::-webkit-details-marker { display: none; } .menu-section summary h2 { margin-bottom: 0; } .menu-section summary .chevron { font-size: 1.2rem; color: var(--color-text-light); transition: transform 0.15s ease; flex-shrink: 0; margin-left: 12px; } .menu-section[open] summary .chevron { transform: rotate(180deg); } .menu-section-items { padding-top: 12px; } /* Foto de platillo integrada en su propio item */ .menu-item-photo { width: 100%; max-width: 460px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; margin-bottom: 10px; display: block; } /* Foto representativa de toda una sección (ej. varios tacos juntos) */ .menu-section-photo { width: 100%; max-width: 460px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; margin-bottom: 14px; display: block; } /* -------------------------------------------------------------------------- 23. PALETA CÁLIDA PARA MENÚS DE RESTAURANTE -------------------------------------------------------------------------- */ /* Envuelve el contenido específico del restaurante (NO el header/footer del sitio) para que use tonos cálidos (apetitosos) en vez del azul/naranja de marca de mimonclova. Como todos los componentes ya usan variables de CSS, sobreescribir estas variables aquí retiñe automáticamente todo lo de adentro (encabezados, precios, fondos, texto, bordes) sin duplicar CSS. */ .restaurant-theme { --color-navy: #4A3428; --color-blue: #A67C3D; --color-orange: #B5502E; --color-orange-dark: #8F3E22; --color-bg: #FBF3E7; --color-text: #3A2F27; --color-text-light: #8A7A68; --color-border: #E8DCC8; }/* -------------------------------------------------------------------------- 20. TARJETA DE DOCTOR (páginas de especialidad médica) -------------------------------------------------------------------------- */ .specialty-listing { background-color: var(--color-bg); padding: 32px 0 48px; } .doctor-card { background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: 12px; padding: 22px 26px; margin-bottom: 16px; } .doctor-card h3 { margin-bottom: 4px; } .doctor-phone { font-family: var(--font-heading); font-weight: 600; color: var(--color-navy); margin-bottom: 4px; } .doctor-address { color: var(--color-text-light); margin-bottom: 10px; } .doctor-note { background-color: var(--color-blue-tint); color: var(--color-blue-tint-text); border-radius: 6px; padding: 10px 14px; font-size: 0.9rem; margin-bottom: 12px; } .business-phone { color: var(--color-text-light); font-size: 1rem; } /* -------------------------------------------------------------------------- 19. MENÚ CON TEXTO REAL (reemplaza fotos de páginas de menú completas) -------------------------------------------------------------------------- */ .menu-section { margin-bottom: 36px; } .menu-section-note { font-size: 0.88rem; color: var(--color-text-light); font-style: italic; margin: -0.5rem 0 1rem; } .menu-item { padding: 10px 0; border-bottom: 1px solid var(--color-border); } .menu-item-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .menu-item-name { font-family: var(--font-heading); font-weight: 600; color: var(--color-navy); } .menu-item-price { font-family: var(--font-heading); font-weight: 600; color: var(--color-orange); white-space: nowrap; } .menu-item-combo { display: block; font-size: 0.78rem; font-weight: 500; color: var(--color-text-light); margin-top: 2px; } .menu-item-desc { display: block; font-size: 0.86rem; color: var(--color-text-light); margin-top: 2px; } /* -------------------------------------------------------------------------- 19. FILTROS DE MENÚ — Dieta y Picor (opcional, solo Plan Completo) Adaptado del sistema ya probado en menuderestaurante.com.mx. Si un platillo no trae data-tags, estos filtros lo ignoran por completo y la página se comporta exactamente igual que sin este bloque. -------------------------------------------------------------------------- */ .ia-voz-sugerencia { font-size: 0.78rem; color: var(--color-text-light); font-style: italic; margin: 4px auto 0; max-width: 420px; text-align: center; } .action-btn-primary.confirmado { background-color: var(--color-navy); border-color: var(--color-navy); } .menu-filtros { background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; padding: 16px 18px; margin: 18px 0 4px; } .menu-filtros-instruccion { font-family: var(--font-heading); font-size: 0.82rem; font-weight: 600; color: var(--color-navy); margin: 0 0 10px; } .filtro-dieta-chips { display: flex; flex-wrap: wrap; gap: 8px; } .filtro-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border: 1px solid var(--color-border); background-color: var(--color-white); border-radius: 20px; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; color: var(--color-navy); cursor: pointer; user-select: none; } .filtro-chip img { width: 15px; height: 15px; flex-shrink: 0; display: block; } .filtro-chip.activo { background-color: var(--color-orange); border-color: var(--color-orange); color: var(--color-white); } .filtro-chip.activo img { filter: brightness(0) invert(1); } .filtro-picor-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; margin-top: 14px; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; color: var(--color-orange-dark); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .filtro-picor-link img { height: 15px; width: auto; vertical-align: middle; } .filtro-picor-panel { display: none; margin-top: 10px; } .filtro-picor-nota { font-size: 0.75rem; color: var(--color-text-light); margin: 0 0 10px; line-height: 1.5; max-width: 420px; } .filtro-picor-slider-row { display: flex; align-items: center; gap: 14px; } .filtro-picor-slider-row input[type="range"] { flex: 1; max-width: 220px; accent-color: var(--color-orange); } .filtro-picor-chiles { display: flex; gap: 3px; align-items: center; } .filtro-picor-chiles img { height: 22px; width: auto; display: block; } .filtro-picor-estado { font-size: 0.75rem; font-weight: 600; color: var(--color-navy); margin: 8px 0 0; } .menu-filtros-resultado { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px 2px; font-size: 0.78rem; color: var(--color-text-light); } .menu-filtros-limpiar { background: none; border: none; padding: 0; font-family: var(--font-heading); font-size: 0.78rem; color: var(--color-orange-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: none; } .menu-filtros-vacio { display: none; text-align: center; padding: 30px 16px; color: var(--color-text-light); font-size: 0.85rem; } .menu-item-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; } .tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border: 1px solid var(--color-border); background-color: var(--color-bg); border-radius: 20px; font-family: var(--font-heading); font-size: 0.68rem; font-weight: 600; color: var(--color-navy); } .tag-chip img { width: 12px; height: 12px; flex-shrink: 0; display: block; } .picor-indicador { display: flex; gap: 2px; align-items: center; margin-left: 2px; } .picor-indicador img { height: 14px; width: auto; display: block; } .picor-indicador-texto { font-family: var(--font-heading); font-size: 0.68rem; font-weight: 600; color: var(--color-navy); margin-left: 5px; }